Question

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

我尝试过

li { 
     line-height: 20px;
 }

但是似乎没有任何效果。

Answer 1

列表项上的

line-height有效。也许您的font-size是20px；这样您看不出任何区别吗？尝试line-height: 20px !important;，也许您使用的是覆盖CSS的CSS框架。

ul li {
  line-height: 20px !important;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

Answer 2

行高在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

希望有帮助！

li元素上的行高

2 个答案: