ホームページ  >  記事  >  ウェブフロントエンド  >  css:list-style-type 属性が機能しないことが多いのはなぜですか?

css:list-style-type 属性が機能しないことが多いのはなぜですか?

黄舟
黄舟オリジナル
2017-06-29 13:47:283298ブラウズ

IE6 で list-style-type:disc を設定すると、次のコードに示すように、実線のドットが表示されるはずですが、表示されません。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>处理IE的列表BGU</title>
</head>
<style type="text/css">
ul{list-style:disc outside;width:350px;height:auto;}
ul li{width:350px;line-height:30px;}
</style>
</head>
<body>
<ul>
<li>酷站代码1</li>
<li>酷站代码2</li>
<li>酷站代码3</li>
<li>酷站代码4</li>
<li>酷站代码5</li>
</ul>
</body>
</html>

原因: list-style-position:Outside;属性によって引き起こされる。

左フロートはボックスモデルを1つずつ水平方向にリハーサルします

リストシンボルの位置はボックスモデルの外側にあります

ので、2番目のリスト項目のシンボルは最初のリスト項目によって覆われます

追加で適用しますfloat: left 属性も LI 要素を異常にします。

解決策: list-style-position:outside; を list-style-position: inside; に変更するか、フローティング設定を削除します。

以上がcss:list-style-type 属性が機能しないことが多いのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。