左边距问题与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 example

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才能保持间距一致。

通过此解决方法，可以在光盘之前和之后输入非中断空格。