在下面的代码中,我希望 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>
最佳答案
如果您检查 documentation你会读到这个:
As float implies the use of the block layout, it modifies the computed value of the display values, in some cases:
这意味着您的 float span
成为 内联元素 内的 block 元素,这会破坏您的布局。
您还可以注意到 padding-top
/padding-bottom
和 border-top
/border-bottom
不会影响 outer
div 的高度。这是因为在计算行框的高度时只使用了line-height
ref ;因此 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>
关于html - 你能漂浮在跨度的右边吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57097028/