Question

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

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

Answer 1

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

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

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

查看以下示例：

＆＃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;

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

1 个答案: