我有一个小的下拉选择框在溢出框内。问题是我不能让链接的背景填满整个宽度。只需尝试滚动即可:
.outer {
width: 100px;
height: 100px;
overflow: auto;
border: 1px solid black;
}
.inner a {
background: none #ccc;
display: inline-block;
white-space: nowrap;
}
.inner.block a {
display: block;
}
<p>inline-block:</p>
<div class="outer">
<div class="inner"><a href="#">Some link title in here.</a></div>
<div class="inner"><a href="#">Some much longer link title in here.</a></div>
</div>
<p>block:</p>
<div class="outer">
<div class="inner block"><a href="#">Some link title in here.</a></div>
<div class="inner block"><a href="#">Some much longer link title in here.</a></div>
</div>
还可以在Playground上实践。
我可以以任何方式修改CSS和HTML,容器具有position: absolute
。此外,背景是重复的图像,而不是纯色。
如何使文本后面的背景延伸到边缘?