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

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™......