3

フローティングブロック要素とその周りを流れるアイテムの順序付けられていないリストがあります。listItemsのマージンがフローティング要素と重なっているようです。

簡単な例を次に示します。

<p>some text</p>
<div class="leftcaption">image with caption</div>
<p>some more text, now comes a list</p>
<ul>
    <li>Item (bad left margin)</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item (correct left margin after the caption div)</li>
</ul>

CSS：

* { margin:5px; }
ul {
    list-style-type:disc;
    margin-left:30px;
}
.leftcaption {
    float:left;
    margin: 5px 5px 5px 0;
    /* just to make it look like a real caption: */
    background-color: #DDD;
    width:100px;
    height:100px;
}

これはどのように見えるかです：

間違ったリストアイテムマージンの例

回避策の1つは、順序付けされていないリストをブロックレベルの要素にすることですが、フローがなくなり、さらに、右側にブロックが浮いている場合はプッシュダウンされます。

4

2 に答える 2

4

list-style-position:inside;ルールをCSSに追加します。

jsFiddleの例

ul {
    list-style-type:disc;
    margin-left:30px;
    list-style-position:inside;
}
于 2013-01-26T20:34:55.803 に答える
1

マージンを追加できる別の方法：

ul {
    margin-left:0; list-style-type:none;
}
ul li:before{
    content:"\00A0\25cf\00A0\00A0\00A0";
}

@ j08691によって提供される解決策は、おそらく依然として最善のオプションですが、間隔を一定に保つために、左マージンとパディングを0に設定する必要があります。

この回避策を使用すると、ディスクの前後に改行なしスペースを入力できます。

于 2013-01-26T21:20:59.453 に答える