css - div 内的 Span 样式不正确

Question

我想在 div 中使用 span

div用来放一条红色的横线

<div style="background-color:red;">
</div>

span 用于在 div中将元素向右放置

<div style="background-color:red;">
<span style="float:right;">
ABC
</span>
</div>

但是水平线没有变成红色，右边只显示ABC，实际上没有像width：900px这样的div样式的效果.. ....为什么？

Answer 1

我建议：

<div style="background-color:red; text-align:right;">ABC</div>

overflow:auto否则，如果您确实想利用<span>原始示例中的样式，则需要添加到 div 的样式定义中。

干杯

Answer 2

添加overflow:auto到 div：

<div style="background-color:red;overflow:auto;">
<span style="float:right;">
ABC
</span>
</div>​

jsFiddle 示例

浮动内部跨度会导致 div 本质上崩溃，添加溢出规则允许它重新获得跨度。

Answer 3

浮动没有给你的 div 任何高度。您需要使用clear. 试试这个：

<div style="background-color:red;">
  <span style="float:right;">
    ABC
  </span>
  <div style="clear: both;"></div>
</div>

Answer 4

您需要添加属性overflow:hidden；在你的 DIV 中。下面我提到了代码：

<div style="background-color:red; text-align:right; overflow:hidden;"> ABC </div>