如何使溢出内容中的项目背景可见?

3

我有一个小的下拉选择框在溢出框内。问题是我不能让链接的背景填满整个宽度。只需尝试滚动即可:

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

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


如果你向右滚动,你会发现背景没有填充。在我的情况下,我看到了下面的内容。我正在Firefox上进行测试。 - skobaljic
当然,要占满整个宽度并覆盖下面的内容。 - skobaljic
你想让它适用于inline-block和block部分,还是只有其中一个可以? - jmargolisvt
这就是我尝试过的,但没有成功。我不在乎它是inline-block还是block。 - skobaljic
JavaScript允许吗?无法找到纯CSS解决方案... :) - sinisake
4个回答

6

只需将链接包装在另一个 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

希望这个链接考虑到了您需要的所有内容。


它无法与我的重复图像背景一起使用。此外,链接在末尾将无法点击。我希望链接占用所有可用的宽度。另外,如果我想添加悬停效果,我会遇到麻烦。 - skobaljic
@skobaljic 让我考虑一下。 - Damien Black
@skobaljic,现在应该可以了。对吧? - Damien Black
是的,现在它几乎和Urbanski的一样了。我认为这是解决问题的正确方式。即使使用html5包装div也可以,但我认为Urbanski的答案看起来更好一些。 - skobaljic

2
在我的例子中,链接可以在整个宽度范围内点击,并且您可以轻松添加可重复的背景。
<div class="outer">
    <div class="background">
        <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>

-

.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;
}

JsFiddle


所以你将它包装在inline-block中,问题就解决了。我仍然不知道为什么,但它运行得很好。谢谢,我认为这将是非常有用的答案。 - skobaljic
是的,这是因为<a>标签默认是内联的。如果您将普通的<a>行为更改为块,则应该可以解决问题。 - Dawid Urbanski

1

不使用任何包装器:

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

带有包装器:

.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;
}
<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>


1
我不知道内部宽度。例如,这个能否适配300(当前外部宽度为720,仍需滚动):数码相机 - 佳能 - 公司TR-130S轻量级齿轮带平移摇头 - 相机/摄像机三脚架(350毫米-1060毫米/40')。因此,内部宽度必须是灵活的。 - skobaljic
这些样式应该适用于哪个HTML?这里的“.cover”是什么? - skobaljic

1
我希望这可以是解决方案:

<p>inline-block:</p>
<div class="outer">
    <div class="table">
    <div class="inner"><a href="http://google.com">Some link title in here.</a></div>
    <div class="inner"><a href="http://yahoo.com">Some much longer link title in here.</a></div>
    </div>
</div>

.outer {
    width: 100px;
    height: 100px;
    overflow: auto;
    border: 1px solid black;
}
.table {
    display:table;
}
.inner {
    display:table-row;
}
.inner a {
    background: none #ccc;
    display: block;
    white-space: nowrap;
}

.inner a:hover {
    background-color:orange;
}

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

因此,再次使用包装器div,但具有display:table属性,内部div作为表行...可单击、悬停™...


这就是我为什么喜欢StackOverflow的原因,伟大的人提出了伟大的想法!谢谢你,伙计! - skobaljic
喜欢这个想法,但最终我认为你也会同意这将是Urbanski答案的替代方案。再次感谢。 - skobaljic

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接