Question

为什么带有float的按钮：left或float：right content会改变按钮的垂直位置？例如http://jsfiddle.net/8ff6dhou/

<button>aaa</button>
<button><div style="float:left">bbb</div></button>
<button><div style="float:right">ccc</div></button>
<button>ddd</button>

为什么4个按钮不在同一垂直位置？如何解决这个问题？

Answer 1

因为你的div宽度不足以容纳4个按钮。增加它！

向div提供左侧或右侧没有任何意义。实际上没有必要div。只需使用以下代码：

<div style="width:200px;height:200px;background-color:#eeeeee;margin:10px;">
  <button style="float:left;width:50px;">
    aaa
  </button>
  <button style="float:left;width:50px;">
      bbb
  </button>
  <button style="float:left;width:50px;">
      ccc
  </button>
  <button style="float:left;width:50px;">
    ddd
  </button>
</div>

如果你将div浮动到按钮内部，它只会浮动按钮，同时按钮位置相同。你想浮动按钮，所以把style属性放在按钮上！

Answer 2

为所有按钮添加垂直对齐。

button{vertical-align:top;}

Answer 3

<button><div style="float:left">aaa</div></button>
<button><div style="float:left">bbb</div></button>
<button><div style="float:left">ccc</div></button>
<button><div style="float:left">ddd</div></button>

CSS浮动内容更改父位置

3 个答案: