我知道这是一个非常简单的案例,但它给我带来了严重的麻烦。为什么在这个非常非常简单的例子中,浮动无线电导致前一跨度移动几个像素?这可以以某种方式防止吗?
好的,澄清一下:float: right
已被注释掉,因此您可以在jsfiddle中取消注释,并查看“文本”位置更改(如它居中或应用margin-bottom)。
HTML
<span class="wrap">
<span>Text</span>
<input type="radio" class="myRadio"></input>
<span>
CSS
.myRadio{
/*float: right;*/
}
.wrap{
width: 15%;
display: inline-block;
}
http://jsfiddle.net/m4o4epw0/2/
我总是认为,如果将float: right
应用于inline-block元素,则不需要移动inline-block元素。
答案 0 :(得分:1)
好的。现在我明白了。它不是前面<span>
向上移动。原因是,<input>
元素,当它具有DOM空间(没有浮点和静态位置)时,它的高度高于span
,并且span
垂直底部对齐。
当您为该实例提供float: right
或任何其他浮动或位置时,它不占用DOM空间,您会看到<span>
占据自己的高度。
您可以使用float
ed元素在父级上使用overflow: hidden
获取DOM空间,如下所示。
查看以下示例:
.wrap {width: 75px; display: inline-block; border: 1px solid #999;}
.float .myRadio {float: right;}
.ovh {overflow: hidden;}
&#13;
<h4>Without Float</h4>
<span class="wrap">
<span>Text</span>
<input type="radio" class="myRadio" />
</span>
<h4>With Float</h4>
<span class="wrap float">
<span>Text</span>
<input type="radio" class="myRadio" />
</span>
<h4>With Float</h4>
<span class="wrap float ovh">
<span>Text</span>
<input type="radio" class="myRadio" />
</span>
&#13;