Chrome Float Left Issue

Question

我的chrome是最新的31.0.1650.48版本。

今天我只是注意到浮动：左侧似乎无法正常工作。 （IE＆amp; 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 ＆amp;旁边浮动 li 一开始。但是，如果我右键单击该div - ＆gt;检查元素 - ＆gt;解开'浮动：左'，然后重新勾选它，它变得正确。

谁对此有任何想法？

ADD：

ul 是浮动：左边，每个 li 实际上有1个背景图像，浮动：左边也是。在这种情况下，3（li）图像一起显示在1行中，下一个div（复选框形状）应显示在同一行中。但现在 div 显示到下一行，除非我取消＆amp;重新勾选它的浮动：左css。

再次添加

请查看2个结果的截屏：

WHOLE div是float：right，内部ul，li和div是向左浮动的。但是在所有这些li下，绿色的“复选框喜欢”div开始显示。当我取消并重新勾选浮动时：左，它就变好了。

谢谢！

Answer 1

检查您是否明确width到<ul>。并检查您的<ul>和checkbox div的宽度'是 小于或等于 到 div的宽度listWrapper崩溃。如果母div没有宽度，那就可以了，试试这个

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

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

选中此Fiddle

或更新Fiddle。

Answer 2

不确定为什么你会从不同的浏览器中获得不同的结果，但你需要浮动ul元素以将复选框放在旁边。此外，正如您在帖子评论中提到的那样，您有一个内联样式，将display属性更改为inline-block，这显然会否定浮动属性。

Here's a codepen.我用一种颜色替换了背景图片网址以显示行为。

Answer 3

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