Центрирование элементов li с дисплеем: inline, которые имеют ul внутри

Question

Привет Я ищу, чтобы создать центрированный нижний колонтитул, который использует элементы списка с неорганизованными списками внутри каждого элемента списка. Если я попытаюсь использовать float: left, я заставляю их быть встроенными друг с другом, но он больше не центрирован. Код я в настоящее время выглядит следующим образом: CSS:

@charset "utf-8"; 
/* CSS Document */ 

* { 
margin:0; 
padding:0; 
} 
#box1 { 
margin:0 auto; 
background-color:#00FF66; 
} 
#mainList { 
list-style-type:none; 
text-align:center; 
display:inline; 
} 
.mainLI { 
display:inline; 
} 

HTML:

<div id="box1"> 
<ul id="mainList"> 
    <li class="mainLI"> 
     <p>Title</p> 
     <ul class="subList"> 
      <li>item1</li> 
      <li>item2</li> 
      <li>item3</li> 
     </ul> 
    </li> 
    <li class="mainLI"> 
     <p>Title</p> 
     <ul class="subList"> 
      <li>item1</li> 
      <li>item2</li> 
      <li>item3</li> 
     </ul> 
    </li> 
</ul> 
</div> 

Answer 1

Это beacuse содержание центрируется выравнивания текста в контейнере, то есть ширина 100% контейнера по умолчанию, но меньше, если он плавает.

В любом случае, я не понимаю, чего вы хотите достичь? Вы хотите разместить элемент списка центра, но плавать в одно и то же время? Не могли бы вы уточнить себя больше?

Answer 2

CSS:

@charset "utf-8"; 
/* CSS Document */ 

* { 
    margin:0; 
    padding:0; 
} 
#box1 { 
    margin:0 auto; 
    background-color:#00FF66; 
} 
#mainList { 
    list-style-type:none; 
    text-align:center; 
} 

#mainList li, .mainLI p { 
    display:inline; 
} 

Example

Ваша проблема с центровкой заключается в том, что родительский элемент, в котором вы центрирование детей должен быть блочным элементом. См. MDN