2つのリストが左からフローティング左

Question

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

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

すべてのコンテンツはtext-align: center;です。したがって、リスト1は中央になり、リスト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;に設定し、おそらく幅を追加してみてください。