内联列表高度与换行文本不一致

Question

您好，我有一个内联列表，如果锚点中的文本换行到下一行，它会表现得很奇怪。我可以用 line-height: 0; 解决它，但这也会弄乱文本。关于如何让他们都在同一条线上有什么想法吗？

代码片段

#communityBoardsLinks{ margin: 10px 0 20px 0; list-style: none; padding: 0;}
#communityBoardsLinks li{
  display: inline-block;
  background-color: black;
}
#communityBoardsLinks li a{
  font-family: sans-serif;
  display: block;
  color: white;
  font-weight: bold;
  font-size: 24px;
  width: 96px;
  height: 96px;
  padding: 10px;
  text-decoration: none;
}
#communityBoardsLinks li a:hover{ color: red;}
#communityBoardsLinks li:last-child{ width: 115px;}

#wrapperMan{ width: 715px;}

<div id="wrapperMan">
 <ul id="communityBoardsLinks">
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Long Link</a></li>
  <li><a href="#">Long Link</a></li>
  <li><a href="#">Long Link</a></li>
 </ul>
</div>

Answer 1

在#communityBoardsLinks li中添加vertical-align: top;。

#communityBoardsLinks{ margin: 10px 0 20px 0; list-style: none; padding: 0;}
#communityBoardsLinks li{
  display: inline-block;
  background-color: black;
  vertical-align: top;
}
#communityBoardsLinks li a{
  font-family: sans-serif;
  display: block;
  color: white;
  font-weight: bold;
  font-size: 24px;
  width: 96px;
  height: 96px;
  padding: 10px;
  text-decoration: none;
}
#communityBoardsLinks li a:hover{ color: red;}
#communityBoardsLinks li:last-child{ width: 115px;}

#wrapperMan{ width: 715px;}

<div id="wrapperMan">
 <ul id="communityBoardsLinks">
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Long Link</a></li>
  <li><a href="#">Long Link</a></li>
  <li><a href="#">Long Link</a></li>
 </ul>
</div>

内联列表高度与换行文本不一致

Inline list heights not consistent with wrapped text

html

css

html-lists