CSS распространяется <li>по горизонтали <ul>

Question

Я пытаюсь распространить список <li>, выровненных по горизонтали, используя float:left по моим <ul>.

Кто-нибудь знает, как это сделать?

Answer 1

Ответ заключается в использовании display: table; для элемента <ul> и display: table-cell; для элементов <li>.

Answer 2

Есть ли причина, по которой вы не можете просто установить их на display: inline; (или inline-block)?Например:

http://jsfiddle.net/TKmR5/

Answer 3

li {
    display: inline-block;
}

ul{
    text-align: center;
}

Затем отрегулируйте отступы или поля элементов li, чтобы распределить их по разным или меньшим значениям по всей ул.

Answer 4

Вы можете использовать display: inline-block;, это работает в современных браузерах.

Пример: http://jsfiddle.net/joar/ELpDD/

Как сказал Фила в комментариях к # 7131346 ,

[…] «неуклюжее пространство между элементами» вызвано не переустанавливанием полей и отступов…

Answer 5

Плавайте влево и делите ширину ul на число li s. Я думаю, что вы ищете. Посмотрите здесь: http://jsfiddle.net/b2nsW/

HTML:

<ul>
    <li>item</li>
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
</ul>

CSS:

ul {
    width: 250px;
    background: red;
    padding: 0;
    margin: 0;
    overflow: auto;
}

li {
    width: 20%;
    float: left;
    background: green;
    margin: 2.5%;
}