Question

我正在使用twitter-bootstrap框架，我正在尝试将一些文本控件放在右边，一些文本对齐左边（所有文本都在同一行）。

HTML

<div class="inlineb">Hello</div>
<div class="floatr inlineb">
    <input type="text" class="form-control inlineb"> cm
</div>
<hr>
<button class="btn btn-primary">Hello stackoverflow</button>

CSS

hr {
    margin: 30px 0px 30px 0px;
    border-color: red;
}
body {
    padding: 30px;
}
.form-control {
    width: 100px;
}
.floatr {
    float: right;
}
.inlineb {
    display: inline;
}

但是，如您所见，如果我使用{{1}，则包含hr标记上方输入的div不会考虑在css中设置为hr的边距（margin-top：30px） }。但如果我不使用这个属性，它会尊重它。看到它： http://jsfiddle.net/2gu29/9/

为什么我的解决方案不起作用？你能告诉我一个例外吗？你还有其他选择吗？

任何提示，建议或帮助将不胜感激，如果您需要更多信息，请告诉我，我将编辑该帖子。

Answer 1

浮动元素和内联元素始终存在问题。如果要解决此问题，则需要在hr标记中添加display:inline-block and width:100%。此处已更新fiddle

Answer 2

浮点CSS属性指定一个元素应该从正常流中获取并放置在其容器的左侧或右侧，其中文本和内联元素将环绕它。

如果您从MDN Float Documentation读取此行，您可以理解，只要我们将float属性应用于任何元素，它就会从页面的正常流程中取出。

因此，保证金是从 Hello 字而不是浮动元素计算的。

<强>解决方案

将div inlineb and floatr包裹在另一个div中你应该没问题。结帐 JS Fiddle

更新代码

<div class='container'>
  <div class="inlineb">Hello</div>
  <div class="floatr inlineb">
    <input type="text" class="form-control inlineb" /> cm
  </div>
</div>
<hr>
<button class="btn btn-primary">Hello stackoverflow</button>

Answer 3

@blunderboy已经解释了问题所在。我的答案只是一个替代解决方案，我将左侧元素浮动并将输入对齐到右侧，因此它仍然具有高度。

<强> HTML

<div class="floatl">Hello</div>
<div class="rightinput">
    <input type="text" class="form-control inlineb"/> cm
</div>
<hr>
<button class="btn btn-primary">Hello stackoverflow</button>

<强> CSS

hr {
    margin: 30px 0px 30px 0px;
    border-color: red;
}
body {
    padding: 30px;
}
.form-control {
    width: 100px;
}
.floatl {
    float: left;
}
.inlineb {
    display: inline;
}
.rightinput {
    text-align: right;
}

为什么带浮点数的div：right不尊重下面hr标记的边距？

3 个答案: