HTML unordered list bullets and floating div's inside li on Webkit

问题

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

Here is the code:

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

回答1:

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

Here's a working Fiddle.

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

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

IE8 supports inline-block properly ;)

回答2:

If I'm understanding, you want the float on the ul li, not the ul li .left, and then adding float: left so that each item appears on a different line. Otherwise it causes the content of each li to float to the left past the bullet.

Updated jsfiddle with the float move to ul li: http://jsfiddle.net/JjrU3/3/

回答3:

If your goal is to mimic columns, use a display: inline-block on your ul li.left instead of the float: left. You would have to be sure that the width of your li equals its highest content. Otherwise the columns will overlap

the fiddle

回答4:

Two span floating there will be a bug，so you define the first span with float,the second span with display:inline-block. and you can use display for span:

ul li .leaf {display:inline-block}

来源：https://stackoverflow.com/questions/17018792/html-unordered-list-bullets-and-floating-divs-inside-li-on-webkit