html - ListItems 在浮动块元素周围流动的左边距问题

Question

我有一个浮动块元素和一个围绕它流动的项目的无序列表。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;
}

这是它的样子：

一种解决方法是使无序列表成为块级元素，但随后它将不再流动，此外，如果还有一个块浮动到右侧，它将被下推。

Answer 1

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

jsFiddle 示例

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

Answer 2

另一种方法也可以让您添加边距：

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

@j08691 提供的解决方案可能仍然是最好的选择，但必须将左边距和填充设置为 0 以保持间距一致。

使用此解决方法，可以在光盘之前和之后输入不间断空格。