ホームページ > 記事 > ウェブフロントエンド > li Bullet_html/css_WEB-ITnose
li Bullet_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:35:521072ブラウズ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">ul,li{margin:0; padding:0; }ul{border:solid 1px red; padding:5px; width:300px;}li{ line-height:25px;list-style:inside decimal; clear:both;}li a{float:left; font-size:14px;}li span{float:right; color:#999999}</style></head><body><ul> <li> <a href="#">新闻标题1</a><span>06/04/2012</span></li> <li> <a href="#">新闻标题1</a><span>06/04/2012</span></li> <li> <a href="#">新闻标题1</a><span>06/04/2012</span></li> <li> <a href="#">新闻标题1</a><span>06/04/2012</span></li></ul></div></body></html> 左右のフローティング表示は上に設定されていますが、弾丸の表示位置が間違っています
---------------------------- ------ -------------------------------------------- ----
css を
ul,li{margin:0; padding:0; }
ul{border:solid 1px width:300px;}
li{ line-height: に変更した場合25px;list-style:inside 10mal; clear :both;}
li a{ font-size:14px;}/*float:left はここでは設定されません*/
li spa{float:right color:#999999}
しかし、ie6 の時刻表示位置が間違っています (改行) )、float をクリアする方法がわかりません。 。 。
上記の問題を解決するにはどうすればよいですか? ?
ディスカッションに返信 (解決策)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">ul,li{margin:0; padding:0; }ul{border:solid 1px red; padding:5px; width:300px;clear:both;}li{ line-height:25px;list-style:inside decimal; }li a{ font-size:14px;}/*这里不设置float:left*/li span{float:right; color:#999999}</style></head><body><div><ul> <li> <span>06/04/2012</span><a href="#">新闻标题1</a></li> <li> <span>06/04/2012</span><a href="#">新闻标题1</a></li> <li> <span>06/04/2012</span><a href="#">新闻标题1</a></li> <li> <span>06/04/2012</span><a href="#">新闻标题1</a></li></ul></div></body></html> 試してみる
921fa0d6536c39a0d9e0969f11f17287
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e
< スタイルタイプ...
逆の位置はいつも奇妙に感じますが、簡単に解決できます。 。 。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。