Question

首先li的身高是45px。第二个li的一个是46px。为什么？

div {
  height: 45px;
  line-height: 45px;
  background-color: #b6ff00;
}
li {
  line-height: 45px;
  list-style: none;
  float: left;
}
li > a {
  width: 200px;
  line-height: inherit;
  display: block;
  text-decoration: none;
  background-color: #ff6a00;
}
li:first-child > a {
  background-color: #00ffff;
}

<div>
  <ul>
    <li>
      <a href="#">dfdd</a>
    </li>
    <li>
      <a href="#"><small>sdaf</small>abc</a>
    </li>
  </ul>
</div>

Answer 1

另一种解决方案是将display:block;标记更改为display:flex; {/ 1}}。

<a>

div {
  height: 45px;
  line-height: 45px;
  background-color: #b6ff00;
}
li {
  line-height: 45px;
  list-style: none;
  float: left;
}
li > a {
  width: 200px;
  line-height: inherit;
  /* REMOVED */
  /*display: block;*/
  display: flex; /* added*/
  text-decoration: none;
  background-color: #ff6a00;

}
li:first-child > a {
  background-color: #00ffff;
}

Answer 2

我完全赞同@Alochi。半场领先是罪魁祸首。 Read this了解有关半场领先及其计算方法的更多信息。

解决此问题的方法是在height:45px;标记中添加<a>。

div {
  height: 45px;
  line-height: 45px;
  background-color: #b6ff00;
}
li {
  line-height: 45px;
  list-style: none;
  float: left;
}
li > a {
  width: 200px;
  line-height: inherit;
  display: block;
  text-decoration: none;
  background-color: #ff6a00;
  height:45px; /* ADDED*/
  
}
li:first-child > a {
  background-color: #00ffff;
}

<div>
  <ul>
    <li>
      <a href="#">AAAA</a>
    </li>
    <li>
      <a href="#"><small>AAAA</small>AAA</a>
    </li>
  </ul>
</div>

HTML <small>标记如何影响CSS line-height属性？</small>

2 个答案: