두리스트는 센터

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;으로 설정하고 너비를 추가하십시오.