Question

我在溢出框内有一个小的下拉选项。问题是我无法使链接背景填充全宽。试着滚动：

.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。此外，背景是重复的图像，而不是纯色。

如何使文本背后的背景延伸到边缘？

Answer 1

将链接包装在另一个div中。如果每个链接需要背景图像，请将它们附加到内部div。如果您需要整个条形图可点击，请翻转<a>和<div>。像这样：

<div class="outer">
    <div class="background">
        <a href="#"><div class="inner">Some link title in here.</div></a>
        <a href="#"><div class="inner">Some much longer link title in here.</div></a>
    </div>
</div>

.background {
    display: inline-block;
    white-space: nowrap;
}
.background .inner {
    background: none #ccc;
}

JsFiddle

希望将您需要的所有内容考虑在内。

Answer 2

在我的示例中，链接是全长的clickabe，您可以轻松添加可重复的背景。

.outer {
    width: 100px;
    height: 100px;
    overflow: auto;
    border: 1px solid black;
}

.outer a{
    display: block;
    background: url(http://nonessentials.org/wp-content/uploads/2014/01/dots-small-pattern.png);
    background-size:cover;
}

.background {
    background: none #ccc;
    display: inline-block;
    white-space: nowrap;
}

-

user

JsFiddle

Answer 3

~~不使用任何包装器：~~

.inner { width: 300px; } .inner a { background: none #ccc; display: inline-block; white-space: nowrap; width:100%; /*addition*/ }

<击> 使用包装器：

＆＃13;
＆＃13;
.outer { width: 100px; height: 100px; overflow: auto; border: 1px solid black; } .cover { background: none #ccc; display: inline-block; white-space: nowrap; } .inner a { width: 100%; display: inline-block; } .inner.block a { display: block; }
＆＃13;
<p>inline-block:</p> <div class="outer"> <div class="cover"> <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> </div> <p>block:</p> <div class="outer"> <div class="cover"> <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> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 4

我希望这可能是解决方案：

User.js

演示：http://jsfiddle.net/jscohdL0/27/

所以，再次使用包装器div，但是使用display：table属性，将内部div作为table-rows ... Clickable，hoverable™......

如何在溢出时显示项目背景？

4 个答案: