1

私の質問は次のとおりです。次の動作は定義されていますか、それともバグですか?

さまざまな回避策の回答を見てきましたが、動作自体についてではありません。

デフォルトでは、左に浮いているブロックに対する各 <li> の箇条書きは、右ではなくブロックの内側にレンダリングされます。ただし、これは私がそれをレンダリングする方法です（<li>が要素の下に落ちるまでブロックと箇条書きの間のスペース、次に親ブロックの端と箇条書きの間の同じ量のスペース）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <style type="text/css">
        .my_div  {
            float: left;
            background-color: #CCF;
            /* To push <li>s out */
            margin-right: 25px;
        }
        .my_ul   {
            /* Consistency across all browsers */
            padding-left: 25px;
            /* Fix for Opera only */
            list-style-position: inside;
        }
    </style>
</head>
<body>
    <div class="my_div">Some text<br>Second line</div>
    <ul class="my_ul">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</body>
</html>

.my_ulスタイルを削除して、もう一度margin-right表示してみてください。同じようにレンダリングされると思っていましたが、そうではありません。テストしたすべてのブラウザー (Opera 12、Firefox 17、Chrome 23、Internet Explorer 8、Safari 5) で同じように動作します。

4

2 に答える 2

0

サンプルとコードを確認してください。要素にmargin-leftを指定しただけです。<ul>ブロックを左に、リスト項目を右に配置しました。これはあなたの望みですか？

于 2012-12-11T06:20:40.753 に答える
0

回避策は次のとおりです。

ul {
    margin-left:0; list-style-type:none;
}
ul li:before{
    content:"\25cf\00A0\00A0\00A0";
}
于 2013-01-26T21:10:54.280 に答える