兩個名單左起第

Question

<ul id="list1"> 
    <li><img src="whatever" /></li> 
</ul> 

<ul id="list2"> 
    <li><img src="whatever" /></li> 
</ul> 

全部內容是text-align: center;所以list1居中，列表2應該出現在右側的同一行上。但是list2從list1下的行開始。

#list1 { list-style: none; } 
#list1 li { display: inline; } 
#list1 li img { width: 35px; height: 35px; } 
#list1 li:first-child { padding-right: 20px; } 
#list2 { list-style: none; } 
#list2 li { display: inline; padding-right: 5px; float: right; } 
#list2 li img { width: 32px; height: 32px; } 

任何想法或建議嗎？

當im將顯示樣式更改爲在list1處阻塞時，它不再是text-align:center。所以它出現在左側而不是中間。

Answer 1

您將li設置爲內聯顯示，但ul仍然是塊元素。將其設置爲display: inline-block;或display: block; float: left;，也可以嘗試添加寬度。