您可以浮动到跨度的右边吗? [英] Can you float to the right of a span?

问题描述

在下面的代码中，我希望up和down浮动到红线的右边，但它们浮动越过红线到div.

In below code I want up and down to float to right of the red line but they float past it to the 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>

推荐答案

如果您选中

If you check the documentation you will read this:

由于float表示使用了块布局，因此修改了 显示值的值，在某些情况下:

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

这意味着您浮动的span会成为内嵌元素中的 block元素，这会破坏您的布局.

Which means that your floated span become block elements inside an inline element that breaks your layout.

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

You can also notice that padding-top/padding-bottom and border-top/border-bottom doesn't affect the height of the outer div. This is because only the line-height is used when calculating the height of the line box^ref; thus the height of the outer div is equal to the height of the line box. (you may increase the line-height to see the difference)

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

In order to fix both issues, you can change the display of the .inner span to 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>

这篇关于您可以浮动到跨度的右边吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！