Question

如何限制放置在文本上的背景颜色的长度？

我正在搞乱一个非常基本的网站只是为了重新调整我对HTML和所有不同元素的记忆，我使用的是外部样式表，我使用了这段代码：

li:nth-child(4) {
    background: yellow;
}

，这影响的是：

<li>And this will have a yellow background!</li>

现在，颜色确实只显示文本以及文本所在的网页行的其余部分，如何设置它以使文本和其他任何内容都没有背景？有一个简单的CSS解决方案还是我不得不求助于将它放在div标签中？

Answer 1

因为LI会自动延伸到页面的其余部分。只需将以下内容添加到LI样式中：

display:inline-block;

这应该有望解决问题。

然而，这将显示LI在水平线上。另一种方法是在LI中添加另一个元素，例如一个<span>

所以：

<li>And this will have a yellow background!</li>

成为：

<li><span>And this will have a yellow background!</span></li>

然后在CSS中执行类似的操作：

li:nth-child(4)>span { background:yellow; }