4

鉴于这个简化的片段：

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

按钮向右浮动，但在文本下方（在下一行）。我知道我可以使用相对定位重新对齐它，但是有没有正确的方法将两者放在同一条线上。

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

4

4 回答 4

4

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

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

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

这是一个演示这种效果的小提琴。第四个示例显示了反转的 div。

于 2012-06-27T17:52:23.410 回答
2

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

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

#method5 {
  position: relative;
}

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

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

于 2012-06-27T17:55:33.307 回答
1

我第一次误解了你的问题。您应该添加float:left;初始 div 并确保添加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;
​}​

现场演示

于 2012-06-27T17:49:21.727 回答
1

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

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

.cf:after {
    clear:both;
}

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

信用尼古拉斯加拉格尔。然后将您的行包装在一个cf元素中：

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

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

于 2012-06-27T18:03:21.437 回答