0

我有一个带有 list-style-type: disc 的简单无序列表和一些每两个浮动 div 的 li。问题是只有在 Webkit 浏览器（Safari、Chrome...）上，项目符号才会出现在列表的右侧。

请参阅随附的屏幕截图和此小提琴

这是代码：

<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>
4

4 回答 4

3

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

这是一个工作的 Fiddle。

如果您想要 IE7 支持，请添加 only-IE7 css display:inline。这使得 IE7 能够理解 inline-block。

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

IE8 正确支持 inline-block ;)

于 2013-06-10T07:50:16.247 回答
1

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

更新 jsfiddle 与浮动移动到ul li：http: //jsfiddle.net/JjrU3/3/

于 2013-06-10T07:39:09.687 回答
0

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

小提琴

于 2013-06-10T07:51:23.870 回答
0

两个 span 浮动会有 bug，所以你定义第一个 span 用 float，第二个 span 用 display:inline-block。并且您可以将 display 用于 span：

ul li .leaf {display:inline-block}
于 2013-06-10T07:51:47.483 回答