为什么将浮动应用到输入使得前面的跨度移动几个像素?

时间:2015-07-30 22:22:14

标签: css radio-button css-float

我知道这是一个非常简单的案例,但它给我带来了严重的麻烦。为什么在这个非常非常简单的例子中,浮动无线电导致前一跨度移动几个像素?这可以以某种方式防止吗?

好的,澄清一下: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元素。

1 个答案:

答案 0 :(得分:1)

好的。现在我明白了。它不是前面<span>向上移动。原因是,<input>元素,当它具有DOM空间(没有浮点和静态位置)时,它的高度高于span,并且span垂直底部对齐。

当您为该实例提供float: right或任何其他浮动或位置时,它不占用DOM空间,您会看到<span>占据自己的高度。

您可以使用float ed元素在父级上使用overflow: hidden获取DOM空间,如下所示。

查看以下示例:

&#13;
&#13;
.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;
&#13;
&#13;