从中心开始左侧浮动两个列表

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; }

有任何想法或建议吗？

当我将显示样式更改为在list1处阻止时，它不再是text-align:center。所以它出现在左侧而不是中间。

Answer 1

您将li设置为内联显示，但ul仍然是一个块元素。将其设置为display: inline-block;或display: block; float: left;，也可以尝试添加宽度。