内联列表高度与包装文本

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

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

#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>