Hey there! I'm having an issue with my inline list when the text in the anchor wraps onto a new line. I tried using line-height: 0;, but it's causing some problems with the text display. Any suggestions on how to keep everything on the same line?
Check out the code below:
#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>