帶框的無序列表

Question

我有一個無序的列表，其中的列表項是水平顯示的。每個列表項目應包含一些文本和圖像。當我向他們添加內容時，列表項不再對齊。

ul { 
 
    list-style-type: none; 
 
    width: 500px; 
 
    height: 500px; 
 
    border: 1px solid black; 
 
} 
 
li { 
 
    border: 1px solid blue; 
 
    display: inline-block; 
 
    height: 100px; 
 
    width: 100px; 
 
}

<ul> 
 
    <li>222</li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

Jsbin：https://jsbin.com/fobopayaco/edit?html,css,output

有SOM CSS我可以添加到解決這一問題？或者我應該改變我的標記？

Answer 1

您可以只設置vertical-align到top例如

ul { 
 
    list-style-type: none; 
 
    width: 500px; 
 
    height: 500px; 
 
    border: 1px solid black; 
 
} 
 
li { 
 
    border: 1px solid blue; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    height: 100px; 
 
    width: 100px; 
 
}

<ul> 
 
    <li>222</li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

Answer 2

名單只是不喜歡空白的項目。如果因爲某種原因需要某個項目爲空，請使用<li>&nbsp;</li>，否則一旦將所有內容添加到所有項目，normalcy將返回。

Answer 3

通過添加文本，您會看到默認的vertical-align屬性的效果：您的列表項正在與基線對齊。

如果你希望它們都在同一地點進行排列，指定vertical-align屬性爲所有這些：

li{ 
    border:1px solid blue; 
    display:inline-block; 
    height:100px; 
    vertical-align: top; 
    width:100px; 
} 

Answer 4

李嘗試float:left，而不是display:inline-block

Answer 5

或者您可以使用float來left每一個<li>

ul { 
 
    list-style-type: none; 
 
    width: 500px; 
 
    height: 500px; 
 
    border: 1px solid black; 
 
} 
 
li { 
 
    border: 1px solid blue; 
 
    display: inline-block; 
 
    height: 100px; 
 
    width: 100px; 
 
    float: left; 
 
}

<ul> 
 
    <li>222</li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

Answer 6

您可以添加浮動：左或顯示：內聯在你的CSS

li{ 
     border:1px solid blue; 
     display:inline-block; 
     height:100px; 
     width:100px; 
    display:inline; 
    } 

這裏正在撥弄

https://jsfiddle.net/5dh2ak3a/