html - Inline list heights not consistent with wrapped text -
hi have inline list behaving strangely if text in anchor wraps onto next line. can solve line-height: 0;
messes text. ideas on how them on same line?
code snippet
#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>
add vertical-align: top;
in #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>
Comments
Post a Comment