Question

我有一个简单的无序列表，其中包含list-style-type：disc和一些li，每个都有两个浮动的div。问题是只有在Webkit浏览器（Safari，Chrome ...）上，子弹才会出现在列表的右侧。

请参阅随附的屏幕截图和此fiddle

以下是代码：

<ul>
    <li class="cf">
        <span class="left">Text1:</span>
        <span class="left">00,00 &euro;</span>
    </li>

    <li>
        <span class="left">Text2:</span>
        <span class="left">00,00 &euro;</span>
    </li>

    <li>
        <span class="left">Text3:</span>
        <span class="left">00,00 &euro;</span>
    </li>

    <li>
        <span class="left">Text4:</span>
        <span class="left">00,00 &euro;</span>
    </li>
</ul>

Answer 1

正如我在评论中所说，您可以尝试：display:inline-block;

这是working Fiddle。

如果您需要IE7支持，请仅添加-IE7 css display:inline。这使IE7理解了内联块。

如果您只使用一个CSS，可以尝试：*:first-child + html ul li {display:inline;} /* only for IE7 */

IE8正确支持内联块;）

Answer 2

如果我理解，您希望浮动ul li，而不是ul li .left，然后添加float: left，以便每个项目显示在不同的行上。否则会导致每个li的内容浮动到子弹的左侧。

更新了jsfiddle，浮动移至ul li：http://jsfiddle.net/JjrU3/3/

Answer 3

如果您的目标是模仿列，请在display: inline-block而不是ul li.left上使用float: left。您必须确保li的宽度等于其最高内容。否则列将重叠

the fiddle

Answer 4

浮动的两个跨度会有一个错误，所以你用float定义第一个span，第二个span用display：inline-block定义。你可以使用display for span：

ul li .leaf {display:inline-block}

Webkit上的HTML无序列表项目符号和浮动div

4 个答案: