HTML无序列表项目符号和浮动div在Webkit里面的li [英] HTML unordered list bullets and floating div's inside li on Webkit

问题描述

我有一个简单的无序列表与列表风格类型：光盘和一些李的每两个浮动的div。问题是，只有在Webkit浏览器（Safari，Chrome ...），项目符号出现在列表的右侧。

I have a simple unordered list with list-style-type: disc and with some li's that have each two floated div's. The problem is that only on Webkit browsers (Safari, Chrome...) the bullets appear to the right side of the list.

查看附件屏幕截图和此小提琴

See attached screenshot and this 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>

推荐答案

正如我在评论中所说， display：inline-block;

As I say in the comments you could try with: display:inline-block;

这里是 工作小提琴 。

如果您需要IE7支持， IE7 css display：inline 。这使得IE7理解inline-block。

If you want IE7 support, add in you only-IE7 css display:inline. That makes IE7 understand the inline-block.

如果你只使用一个css，你可以尝试： *：first-child + html ul li {display：inline;} / *仅适用于IE7 * /

If you are using only one css you could try: *:first-child + html ul li {display:inline;} /* only for IE7 */

IE8正确支持inline-block;

IE8 supports inline-block properly ;)

这篇关于HTML无序列表项目符号和浮动div在Webkit里面的li的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！