你能漂浮在跨度的右边吗？

Question

在下面的代码中，我希望 up 和 down 漂浮到红线的右侧，但它们漂浮到红线的右侧 div。

这是为什么？

#outer {
  margin-top: 50px;
  margin-left: 50px;
  width: 300px;
  border: 1px solid lightgrey;
}

.inner {
  border: 1px solid red;
  padding: 15px 80px 15px 40px;
  position: relative;
}

.up, .down {
  border: 1px solid #000;
  float: right;
}

.down {
  clear: both;
}

<div id="outer">
  <span class="inner">
    <span class="quantity">Quantity</span>
    <span class="up">up</span>
    <span class="down">down</span>
  </span>
</div>

Answer 1

如果您查看 documentation，您会看到：

As float implies the use of the block layout, it modifies the computed value of the display values, in some cases:

这意味着您的浮动 span 变成了 块元素 在 内联元素 中破坏了您的布局。

您还可以注意到 padding-top/padding-bottom 和 border-top/border-bottom 不会影响 outer div.这是因为在计算line box^ref的高度时只使用了line-height；因此 outer div 的高度等于行框的高度。 （你可以增加行高看看区别）

为了解决这两个问题，您可以将 .inner 范围的显示更改为 inline-block:

#outer {
  margin-top: 50px;
  margin-left: 50px;
  width: 300px;
  border: 1px solid lightgrey;
}

.inner {
  border: 1px solid red;
  padding: 15px 0 15px 40px; /*remove padding-right to have them close to the red line*/ 
  position: relative;
  display:inline-block;
}

.up, .down {
  border: 1px solid #000;
  float: right;
}

.down {
  clear: both;
}

<div id="outer">
  <span class="inner">
    <span class="quantity">Quantity</span>
    <span class="up">up</span>
    <span class="down">down</span>
  </span>
</div>

你能漂浮在跨度的右边吗？

Can you float to the right of a span?

html

css

css-float