Chrome Float Left Issue

Question

Мой хром - последняя версия 31.0.1650.48.

Сегодня я просто заметил, что поплавок: слева кажется не работает должным образом. (. IE & FF отлично и Chrome имел обыкновение быть хорошо, как хорошо)

Html, как:

<div class="listWrapper collapsed clearfix"> 
    <ul> 
    <li><a href="" title="aa"></a></li> 
    <li><a href="" title ="bb"></a></li> 
    <li><a href="" title ="cc"></a></li> 
    </ul> 
    <div class="ui-checkbox" role="checkbox" tabindex="0" style="display:inline-block;"></div> 
</div> 

Css, как:

.ui-checkbox { 
    background: url("../images/elements/form.png") no-repeat -183px -331px; 
    width: 37px; 
    height: 31px; 
    float: left; 
} 

То, что произошло сейчас внутренний флажок div не может плавать рядом с ul & li с самого начала. Но если я щелкнул правой кнопкой мыши этот div -> Inspect Element -> Untick 'float: left', а затем снова включил его, он станет правильным.

У кого есть идеи по этому вопросу?

ADD:

уль с плавающей точкой: левый и каждый Li на самом деле имеет 1 фоновое изображение и плавать: слева, как хорошо. В этом случае 3 (li) изображения отображаются вместе в одной строке, а следующий div (форма флажка) должен отображаться в одной строке. Но теперь div отображение следующей строки, если я не откинусь & перемаркировать его поплавок: слева css.

ADD СНОВА

Пожалуйста, смотрите скриншоты для 2 результата:

Весь ДИВ находится поплавок: справа, и внутренняя улица, литий и ДИВ являются поплавок налево. Но зеленый «checkbox like» div в самом начале отображается под всеми этими ли. Когда я отключаю и снова отпускаю float: слева, он становится ОК.

Спасибо!

Answer 1

Не знаете, почему вы получаете разные результаты от разных браузеров, но вам нужно поплавать с элементом ul, чтобы установить флажок рядом с ним. Кроме того, как упоминалось в ваших комментариях, у вас есть встроенный стиль, изменяющий свойство display на inline-block, что, очевидно, отрицает свойство float.

Here's a codepen. Я заменил URL-адрес исходного изображения с цветом, чтобы показать поведение.

Answer 2

.ui-checkbox { 
    background: url("../images/elements/form.png") no-repeat -183px -331px; 
    width: 37px; 
    height: 31px; 
    float: left; 
    display:inline-block 
} 

Answer 3

Проверьте, были ли вы дали явный width к <ul>. И проверить, является ли ваш <ul> «s и checkbox div„сложение ширина“s является меньше или равны по ширине сНу listWrapper рухнули.Если нет ширины к матери DIV то это нормально и попробовать этот

.ui-checkbox { 
    background-color:green; 
    width: 37px; 
    height: 31px; 
    float: left; 
} 

ul{ 
    float: left; 
    width:50px; 
} 

Проверить это Fiddle

Или обновления Fiddle.