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

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

如果您查看文档,您将阅读:

由于float意味着使用块布局,因此在某些情况下,它会修改显示值的计算值:

这意味着您的浮动内容会span成为内联元素中的块元素,从而破坏您的布局.

您还可以注意到padding-top/ padding-bottom和border-top/ border-bottom不会影响outerdiv 的高度.这是因为line-height在计算^线框ref的高度时只使用了它; 因此outerdiv的高度等于线框的高度.(你可以增加行高以查看差异)

要解决这两个问题,您可以将范围的显示更改.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>