Question

鉴于此简化代码段：

<html>
  <body>
    <div>
      <div style='text-align:center;'>asdfaskjdfakjsd</div>
      <div style='float:right'>
        <input type='submit' value='asdf' />
      </div>
    </div>
  </body>
</html>

按钮浮动到右侧，但在文本下方（在下一行）。我知道我可以使用相对定位来重新排列它，但是有一种正确的方法可以将它们放在同一条线上。

如果添加右侧的按钮不会影响文本的中心对齐，那就更好了。即它不会被推到左边。

Answer 1

您可以切换两个div的顺序：

  <div style='float:right'>
    <input type='submit' value='asdf' />
  </div>
  <div>asdfaskjdfakjsd</div>

只要你不介意它们的顺序相反。

这是一个fiddle来证明这种效果。第四个例子显示了反转的div。

Answer 2

我为跳来跳去道歉。我注意到即使使用反转的div，文本也没有完全居中。

这是另一个解决方案（第五个例子）：http://jsfiddle.net/tracyfu/zYzqr/

#method5 {
  position: relative;
}

#method5 .submit {
  position: absolute;
  right: 0;
  top: 0;
}

唯一的问题是，如果你不小心，或者你的文字是动态的，它可能会与绝对定位的提交相冲突。

Answer 3

我第一次误解了你的问题。您应该在初始div上添加float:left;，并确保将clear:both;添加到他们下方的div中。如果希望文本居中，则需要在初始div上有一个宽度。

<强> HTML ：

<div id="container">
    <div id="content">
        asdfaskjdfakjsd
    </div>
    <div id="containerButton">
        <input type='submit' value='asdf' />
    </div>   
</div>
<div class="clear">asdfaskjdfakjsd</div>

CSS：

#container {
    width:300px;   
}

#content {    
    float:left;
    text-align:center; 
    width:90%;
}

#containerButton {
    text-align:right;
}

.clear {
    clear:both;
}

Live DEMO

Answer 4

标准方法是使用“clearfix”hack。 CSS：

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    *zoom:1;
}

信用Nicolas Gallagher。然后将您的行包装在cf元素中：

<div class="cf">
    <span>Button text</span>
    <div style='float:right'>
        <input type='submit' value='asdf' />
    </div>
</div>

按钮文字更改为span，或者您可以将其保留为div并向左浮动。 cf用于为一组不自然地展示它们的元素提供块属性。没有它，随后的内容将不会被清除。

DEMO

按钮浮动下降到父div下面

4 个答案: