Html 列表项通过将背景颜色扩展到100%来阻止父div的背景图像

当一个元素具有display:block时，该元素的背景色似乎会延伸到父元素宽度的100%（正如预期的那样）。相反，我希望背景色只延伸到文本的边缘，以便父元素的背景色可见。我会使用float或inline块，但每个元素存在于新行上也很重要

CSS代码：

body {
    background-color:#fff;
    color:#1a1a1a;
    font-family: inconsolata;
    font-size:13px;
}
#content {
    position:absolute;
    width:50%;
    left:25%;
    top:5%;
}
.entry {
    /*background-color: #1a1a1a;*/
    background-image:url('images/stripe3.png');
    color:#f00;
    /*padding:1px;*/
}
ul {
    display:block;
}
li {
    background-color:#fff;
    margin-left:20px;
    padding: 0px 4px;
}

HTML代码：

<div id="content">
    <div class="entry">
        <ul>
             <li>
             the illuminator : ongoing : projection, social practice
         </li>
         <li>
             color organisms : 2014 : projection, net art
         </li>
        </ul>
    </div>
</div>

照明器：持续：投影、社会实践


色彩生物：2014：投影、网络艺术

关键是在

li

中有一个纯文本节点，这在CSS中很难选择

将文本包装成某种形式的文本标记（如

p

、

span

）或通常在列表项中的锚定标记

a

）更为常见

如此

<div class="entry">
<ul>
    <li>
        <a href="#">the illuminator : ongoing : projection, social practice</a>
    </li>
    <li>
        <a href="#">color organisms : 2014 : projection, net art</a>
    </li>
</ul>
</div>

但是，这可能会限制链接的单击区域，因此可能会决定将锚定标记

也显示为block

，这样我们就回到了开始的地方

因此，将文本再次包装到内联元素中，例如span和target

修订的HTML

<div class="entry">
    <ul>
        <li>
            <a href="#"><span>the illuminator : ongoing : projection, social practice</span></a>
        </li>
        <li>
            <a href="#"><span>color organisms : 2014 : projection, net art</span></a>
        </li>
    </ul>
</div>

---

最后，如果您希望查看

ul

的背景，请从

li

和

a

中删除背景色-就像这样-

只应用于文本的背景色，因此只需使用

颜色

？或者你的意思是背景颜色受影响的区域应该尽可能缩小到文本附近？请重新表述你的问题，似乎有点不清楚你的意思是：？？注意：//对css评论无效sprismspecs:@Lost是对的，请听他的<代码>/不是标准，是一种黑客行为<代码>/*..*/是标准的。参考：和。另外，花点时间阅读。这非常有效，谢谢你的解释！

<div class="entry">
    <ul>
        <li>
            <a href="#"><span>the illuminator : ongoing : projection, social practice</span></a>
        </li>
        <li>
            <a href="#"><span>color organisms : 2014 : projection, net art</span></a>
        </li>
    </ul>
</div>

.entry {
    background-color: #1a1a1a;
    color:#f00;

}
ul {
    display:block;
}
li {
    background-color:#fff;
    margin-left:20px;
    padding: 0px 4px;
}

li a {
    background-color: lightblue;
    display: block;
}

li a span  { /* like this */
    background-color: yellow;
}