內聯列表高度與包裝文本不一致

您好我有一個內聯列表，如果錨點中的文本換行到下一行，那麼行爲會很奇怪。我可以用line-height: 0;來解決這個問題，但這也會弄亂文本。任何想法如何讓他們都在同一行？內聯列表高度與包裝文本不一致

enter image description here

代碼片斷

#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"> 
 
\t <ul id="communityBoardsLinks"> 
 
\t \t <li><a href="#">Link</a></li> 
 
\t \t <li><a href="#">Link</a></li> 
 
\t \t <li><a href="#">Link</a></li> 
 
\t \t <li><a href="#">Long Link</a></li> 
 
\t \t <li><a href="#">Long Link</a></li> 
 
\t \t <li><a href="#">Long Link</a></li> 
 
\t </ul> 
 
</div>

來源

2015-06-19 Clinton Green

在#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"> 
 
\t <ul id="communityBoardsLinks"> 
 
\t \t <li><a href="#">Link</a></li> 
 
\t \t <li><a href="#">Link</a></li> 
 
\t \t <li><a href="#">Link</a></li> 
 
\t \t <li><a href="#">Long Link</a></li> 
 
\t \t <li><a href="#">Long Link</a></li> 
 
\t \t <li><a href="#">Long Link</a></li> 
 
\t </ul> 
 
</div>

來源

2015-06-19 00:30:12

天才，感謝隊友 –

您最歡迎的兄弟我的榮幸。 P.S：別忘了接受答案:) –

內聯列表高度與包裝文本不一致

回答

相關問題