3

我的 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，内部 ul,li 和 div 是向左浮动。但是一开始的绿色“复选框喜欢” div 显示在所有这些 li 下。当我取消勾选并重新勾选 float:left 时，它就可以了。

谢谢！

4

3 回答 3

1

检查您是否明确给出了widthto <ul>。并检查您<ul>的 's 和'widths checkbox div' 添加是否小于或等于div listWrapper collapsed的宽度。如果母 div 没有宽度，那么没关系，试试这个

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

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

检查这个小提琴

或更新Fiddle。

于 2013-11-14T07:20:22.890 回答
0

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

这是一个代码笔。我用颜色替换了背景图片 url 只是为了显示行为。

于 2013-11-14T06:51:16.153 回答
0 
.ui-checkbox {
   background: url("../images/elements/form.png") no-repeat -183px -331px;
   width: 37px;
   height: 31px;
   float: left; 
   display:inline-block
}
于 2013-11-14T07:14:32.993 回答