Why is li lower than list number in Safari and Chrome?

I'm struggling to figure out why li values ​​are pushed under li number in Safari and Chrome. It looks fine in IE and FF (all in a straight line). Please browse the following in each browser to see what I mean:

http://jsfiddle.net/CfyQF/

I tried to replicate this using tables inside li and not floating divs, but I get the same result.

Does anyone know why this is happening, and how can I update my css or html or both to solve this problem?

Thank!

+3
source share
3 answers

I took some time to come up with a working solution without floats and came up with the following, for those who need it here:

http://jsfiddle.net/zeaHu/11/

+1

. .

float .

0

not sure if it solves your specific problem, but if you cross out all css and most of the div, the numbers line up next to the inputs and the “X” is still sitting to the right of the input;

<div>
    <ol>
        <li>
            <input>
            <button>x</button>
        </li>
        <li>
            <input>
            <button>x</button>
        </li>
    </ol>
</div>
0
source

All Articles