Chrome 浮动左侧问题

Question

我的 chrome 是最新的 31.0.1650.48 版本。

今天我注意到 float:left 似乎无法正常工作。 （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' 然后重新勾选它，它就正确了。

谁知道这个？

添加：

ul 是 float:left 并且每个 li 实际上有 1 个背景图片和 float:left。在这种情况下，3 (li) 图像一起显示在 1 行中，并且下一个 div（复选框形状）应显示在同一行中。但是现在 div 显示到下一行，除非我取消勾选并重新勾选它的 float:left css。

再次添加

请查看 2 个结果的屏幕截图：

整个div是float:right，而inner ul,li和div是float left。但是一开始的绿色“复选框喜欢” div 显示在所有这些 li 下。当我取消勾选并重新勾选 float:left 时，它就可以了。

谢谢！

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

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

Answer 3

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

Here's a codepen. 我用颜色替换了背景图片 url 只是为了显示行为。