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