html - li 元素上的行高

Question

我的页面上有一些项目符号，当项目符号跨越 2 行或更多行时，我试图降低行高。

我的清单目前的样子

我努力了

li { 
     line-height: 20px;
 }

但似乎没有任何效果。

标签： htmlcss

Answer 1

行高在 li 元素上应该可以正常工作。如果这不起作用，我也会尝试利润：

https://codepen.io/anon/pen/zbmrRJ

ul > li {
 line-height: 60px;
}
ol > li {
  margin: 60px 0px;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>b</li>
</ul>
<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ol>

可能是您没有选择正确的课程。尝试右键单击您的

项目，检查浏览器上的元素并检查是否已应用行高。如果未应用， line-height 属性将有一条线穿过它，在这种情况下，您将不得不使用不同的选择器。w3schools 对选择器有很好的参考：

https://www.w3schools.com/cssref/css_selectors.asp

希望有帮助！