Question

好的，我可能再次错过了这个简单的解决方案，但是很快就会陷入困境。我想要做的是能够设置列表项之间的空间。我的问题是我似乎无法覆盖h3标签创建的空间。

    <ul style="list-style-type:none">
        <li><h3>The Oscar is only worth $1</h3></li>
        <li><h3>It takes 10 days to make one Oscar</h3></li>
        <li><h3>The statuettes are 24K gold plated, bronze underneath</h3></li>
        <li><h3>For 3 years during WWII, the statues were made of plaster</h3></li>
        <li><h3>Over 3000 Oscars have been awarded</h3></li>
        <li><h3>The statues are 8.5 pounds and 13.5 inches tall</h3></li>
    </ul>

我尝试使用h3标签创建一个类，但没有运气。我在css中尝试了不同的行，例如：

    li{
      margin: 10px 0;
    }

或

    li { padding: 10px 0px 0px; }
    li:first-child { margin-bottom: 0px; }

或

    li:not(:last-child) {
        margin-bottom: 5px;
    }

我无法更改css中的h3标签间距，因为标签用于其他页面。可以做些什么，所以每条线路都不需要h3标签吗？也许通过javascript作为最后的手段？ 帮助!!

Answer 1

要解决此问题，您可以专门定位h3标记。问题是你正在尝试修复包含li的h3样式。这不是CSS的工作原理。您必须直接定位有问题的元素以覆盖CSS。

＆＃13;

li h3 {
  margin: 10px 0;
}

＆＃13;

<ul style="list-style-type:none">
    <li><h3>The Oscar is only worth $1</h3></li>
    <li><h3>It takes 10 days to make one Oscar</h3></li>
    <li><h3>The statuettes are 24K gold plated, bronze underneath</h3></li>
    <li><h3>For 3 years during WWII, the statues were made of plaster</h3></li>
    <li><h3>Over 3000 Oscars have been awarded</h3></li>
    <li><h3>The statues are 8.5 pounds and 13.5 inches tall</h3></li>
</ul>

＆＃13;

Answer 2

li h3 {
  margin: 0px 0;
}

这个CSS可以改变h3空间。

列表中的间距似乎无法覆盖<h3>自动空间

2 个答案: