html - 当被迫分成两行时，如何使列表中的间距更大？

Question

例如，拿这个简单的列表:

li {
  display: inline;
  padding: 10px;
  font-family: Arial;
  font-size: 15px;
}

<ul>
  <li>HOME</li>
  <li>ABOUT</li>
  <li>SOMETHING ELSE</li>
  <li>ANOTHER THING</li>
  <li>ONE MORE THING</li>
  <li>CONTACT
  </li>
</ul>

当屏幕的宽度变小时，列表被迫扩展到 2 行，然后最终扩展到 3 行，依此类推。我的问题是如何增加这些行之间的垂直间距？

Answer 1

需要在li标签中增加行高。例如:line-height: 32px;

li {
  display: inline;
  padding: 10px;
  font-family: Arial;
  font-size: 15px;
line-height: 32px;
}

<ul>
  <li>HOME</li>
  <li>ABOUT</li>
  <li>SOMETHING ELSE</li>
  <li>ANOTHER THING</li>
  <li>ONE MORE THING</li>
  <li>CONTACT
  </li>
</ul>