Плавающий текст внутри ul с Chrome, IE7 и IE8

Question

У меня проблемы с плавающим текстом в неупорядоченном списке (ul). Проблема возникает, потому что я хочу переместить элемент div влево, мне нужно сделать это, потому что после этого div есть еще один div, который должен находиться на той же строке, поэтому я использую float left. Вот пример для jsFiddle . Теперь проблема в том, что в FF 6.02, Opera 11.50 и IE9 все работает нормально, но в Chrome 14.0.835.202, IE7 и IE8 круг, который должен появиться в начале текста, появляется почти в конце текста на заднем плане. .

Я разместил пример на jsFiddle, но также выложу код здесь:

HTML:

<ul>
<li>
    <div class="textLeft">Glavna knjiga</div>
</li>
</ul>

CSS:

.textLeft {
float: left;
position: relative;
left: 4px;
}

Теперь, как мне это исправить, чтобы я выглядел одинаково в IE7 и Chrome?

Answer 1

Если вам не нужно использовать относительное положение, вы можете сделать оба div-элемента inline-block, а вместо left использовать padding-left.

Вот пример: http://jsfiddle.net/bQthE/3/

Answer 2

Проблема в том, что div плавает, а сам li нет.Это делает так, чтобы индикатор элемента списка, круг, располагался так, как если бы div там не было.Можно ли пропустить li или, возможно, весь ul?

Answer 3

Зачем вам вообще нужно плавать в div? Установите ваши div для отображения: inline-block, и это позаботится об этом. Нужно иметь в виду, что при отображении в виде встроенных блоков создается поле размером 4 пикселя справа от div, поэтому, если у вас есть элемент списка (li) фиксированной ширины, вы должны это учитывать.

Мне обычно не нравятся плавающие элементы, если я могу помочь.