两个名单左起第

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;，也可以尝试添加宽度。