如何在強行分隔爲2行時使列表中的間距更大？

Question

例如，以這種簡單的列表：

li { 
 
    display: inline; 
 
    padding: 10px; 
 
    font-family: Arial; 
 
    font-size: 15px; 
 
}

<ul> 
 
    <li>HOME</li> 
 
    <li>ABOUT</li> 
 
    <li>SOMETHING ELSE</li> 
 
    <li>ANOTHER THING</li> 
 
    <li>ONE MORE THING</li> 
 
    <li>CONTACT 
 
    </li> 
 
</ul>

當屏幕的寬度變得更小，該列表被強制分佈在2行，然後最終3線等。我的問題是如何增加這些線之間的垂直空間？

Answer 1

您需要添加li標籤中增加的行高。 例如：line-height：32px;

li { 
 
    display: inline; 
 
    padding: 10px; 
 
    font-family: Arial; 
 
    font-size: 15px; 
 
line-height: 32px; 
 
}

<ul> 
 
    <li>HOME</li> 
 
    <li>ABOUT</li> 
 
    <li>SOMETHING ELSE</li> 
 
    <li>ANOTHER THING</li> 
 
    <li>ONE MORE THING</li> 
 
    <li>CONTACT 
 
    </li> 
 
</ul>

Answer 2

嘗試使用display: inline-block代替inline或者設置line-height到li等裏卡多建議。

li { 
 
    display: inline-block; 
 
    font-family: Arial; 
 
    font-size: 15px; 
 
    padding: 10px; 
 
}

<ul> 
 
    <li>HOME</li> 
 
    <li>ABOUT</li> 
 
    <li>SOMETHING ELSE</li> 
 
    <li>ANOTHER THING</li> 
 
    <li>ONE MORE THING</li> 
 
    <li>CONTACT 
 
    </li> 
 
</ul>

Answer 3

使用下面的CSS：

li{ 
    display: table-cell; 
    font-family: Arial; 
    font-size: 15px; 
    width: auto; 
} 

ul{ 
    margin: 0; 
    padding: 0; 
    display: table; 
    width: 100%; 
    text-align: center; 
} 

檢查Fiddle這裏