html - ListItems 围绕 float block 元素流动的左边距问题

Question

我有一个 float block 元素和一个围绕它流动的元素的无序列表。 listItems 的边距似乎与 float 元素重叠。

这是一个简化的例子:

<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;
}

这是它的样子:

一种解决方法是将无序列表设为 block 级元素，但这样它就不会再流动了，此外，如果还有一个 block 向右浮动，它会被下推。

Answer 1

将 list-style-position:inside; 规则添加到您的 CSS。

jsFiddle example

ul {
    list-style-type:disc;
    margin-left:30px;
    list-style-position:inside;
}