Html 铬浮子左问题

我的chrome是最新的31.0.1650.48版本

今天我注意到float:left似乎不能正常工作。（IE和FF很好，铬也很好。）

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>

现在发生的是内部复选框div在一开始就不能浮动在ul和li旁边。但是，如果我右键单击该div-->Inspect元素-->取消勾选“float:left”，然后重新勾选它，它将变为正确

谁知道这件事

添加：

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

再次添加

请参见2个结果的屏幕截图：

整个div是浮动的：右侧，内部ul、li和div是浮动的左侧。但是绿色的“复选框状”div在一开始就显示在所有这些li下。当我取消勾选并重新勾选float:left时，它变为OK

---

谢谢

不确定为什么您从不同的浏览器获得不同的结果，但是您需要浮动

ul

元素，并将复选框放在它旁边。另外，正如有人在您的博文评论中提到的，您有一个内联样式，将

显示

属性更改为

内联块

，这显然否定了float属性

---

我用颜色替换了背景图像url，只是为了显示行为。

检查您是否为

指定了明确的
宽度。并检查您的
和
复选框div
的宽度添加值是否小于或等于div listWrapper的宽度。如果母div没有宽度，那么可以试试这个

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

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

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

检查这个

或者更新。
有什么理由同时使用float:left和inline block？您介意提供输出的屏幕截图吗？Ravi，其他一些页面需要在标签的同一行上显示此“类似复选框”的div。即使我删除了这个，也是一样的；我来这里也是因为Chrome30和Chrome31显示左侧浮动的方式完全不同。这看起来确实是渲染方面的一个重大变化。HTMLI中的内联样式已经应用了这种样式，但结果是一样的：（我做了，但看起来没问题：（可能是因为我的li也使用图像？这次的结果还可以。可能是因为我的li也使用图像作为背景？@Samuel Nah，背景与此无关。可能是
listWrapper
的宽度不大于
ul
和
复选框的总宽度。它现在是否正常工作？：）Guru，listwrapper实际上没有宽度，我们只希望它正确浮动。因为显示的li数是动态的，所以我们无法设置listwrapper div的固定宽度。
.ui-checkbox {
   background-color:green;
   width: 37px;
   height: 31px;
   float: left; 
}

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