列表项通过将背景颜色扩展到 100% 来阻止父 div 的背景图像 [关闭]答案

【问题标题】：list item blocks background-image of parent div by expanding background-color to 100% [closed]列表项通过将背景颜色扩展到 100% 来阻止父 div 的背景图像 [关闭]
【发布时间】：2014-07-18 13:25:00
【问题描述】：

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

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>

【问题讨论】：

仅应用于文本的背景色 所以只使用color 代替吗？或者你的意思是背景颜色的影响区域应该尽可能地缩小到靠近文本的位置？
请改写你的问题，好像有点不清楚
你的意思是这样的：jsfiddle.net/abhitalks/UeP3f??
注意：//对 css cmets 无效
prismspecs：@Lost 是对的，请听他的。 // 不是标准的，是一个 hack。 /*..*/ 是标准的。参考：(here) 和 (here)。另外，花点时间阅读(this)。

标签： html css

【解决方案1】：

关键是li 中有一个纯文本节点，在 CSS 中很难选择。

将文本包裹在某种形式的文本标记中更为常见，例如p、span，或者通常在列表项中使用锚标记a。 p>

因此；

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

这样一来，你就可以像这样直接定位锚标签了

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

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

li a { /* select anchor tag */
    background-color: lightblue;
}

但是，这可能会限制您的链接的点击区域，因此人们可能会决定将锚标记 display: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>

修改后的 CSS

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

JSfiddle Final Demo.

最后，如果您希望看到ul 的背景，请从li 和a 中删除背景颜色 - 像这样 - http://jsfiddle.net/8QMvr/8/

【讨论】：

效果很好，感谢您的解释！