it-swarm.com.ru

Как равномерно распределить элементы списка HTML в неупорядоченном списке

Я хочу, чтобы мои элементы li, которые образуют горизонтальное меню, были равномерно распределены по ширине моего элемента ul. Я обычно float мои li элементы слева и добавить некоторые поля. Но как мне установить правильные интервалы, чтобы они проходили слева от моего элемента ul до правого края?

Вот пример jsfiddle меню, не распределенного через ul.

Интервал должен быть одинаковым между каждым li. Но элементы li могут быть разной длины.

19
at.

Еще один подход. Это то, что я использую при попытке равномерно распределить меню по странице. Хорошо, если у вас есть динамическое меню, которое будет меняться в зависимости от определенных условий (например, страница администратора, которая отображается только в том случае, если вы вошли в систему как администратор).

CSS:

nav div ul {
display: table;
width: 100%;
list-style: none;
}
nav div ul li {
display: table-cell;
text-align: center;
}
nav div ul li a {
display: block;
}

Я был немного ленив и просто скопировал это из моего текущего проекта, так что вам придется адаптировать его под свой код, но это мой предпочтительный метод создания горизонтального меню.

Правка: Вы можете сделать так, чтобы он выглядел лучше, добавив это:

CSS:

nav div ul li:first-child {
    text-align: left;
}
nav div ul li:last-child {
    text-align: right;
}

опять не проверено, просто напечатано.

43
FireCrakcer37

У меня есть два ответа для вас.

Если вы хотите придерживаться модели float:

Для вашего элемента ul должно быть установлено свойство overflow (без этого свойства вашему ul (или любому элементу, содержащему плавающие элементы) не присваивается высота (это ожидаемое поведение, обратите внимание: http://www.quirksmode.org /css/clearing.html ) и поэтому по умолчанию будет иметь высоту 0 - эффект этого будет в том, что если вы установите разные цвета фона для вашей ulli и body, фон вашего ul не будет отображаться ).

ul {
    text-align: center;
    width: 300px;
    overflow: auto;
}

Ваши элементы li должны иметь ширину, в противном случае - как плавающие элементы - их ширина будет установлена ​​на то, что они содержат. Я использовал пиксели ниже, но вы также можете использовать процентное значение.

li {
    float: left;
    margin: 5px 0 5px 0;
    width: 100px;
    text-align: center;
}

_/Используйте свойство display:inline-block для ваших элементов li (если поддержка старых браузеров не является приоритетом). IE 7 не поддерживает это, поэтому бесполезно, если вам нужна широкая межбраузерная поддержка, но создает нужный эффект - хотя убедитесь, что вы затем удалите все пробелы между тегами </li> и <li>, иначе они будут будет учитываться в общей ширине и будет отображаться как пробелы между элементами.

Одним из преимуществ этого метода является то, что вам не нужно знать или устанавливать ширину контейнера ul, если вы используете процентную ширину для содержащихся в нем элементов li, вы все равно получаете центрирование бесплатно с уже имеющимся у вас свойством text-align , Это делает ваш макет очень отзывчивым.

Вот разметка и CSS, которые работают так, как я думаю, вы запрашиваете:

Разметка:

<ul>
<li>banana</li><li>orange</li><li>Apple</li>
</ul>

CSS:

li {
    display:inline-block;
    margin:5px 0 5px 0;
    width:33.33%;
}
ul {
    text-align: center;
}
  • Если вы предпочитаете хранить разметку в несколько строк, вам придется возиться с левым и правым полями ваших элементов li в CSS.
  • Если вы добавите элементы li, вам придется изменить ширину в процентах, чтобы она соответствовала (например, с четырьмя элементами li в вашей разметке вам нужно изменить CSS, чтобы ширина каждого элемента составляла 25%).
1
Matt Wagner

Вам нужно установить ширину элементов li, чтобы они заполняли пространство:

ul {
    width: 100%;
}
li {
    float: left;
    width: 33%;
}

( Fiddle демо )

Если вы добавите больше элементов в список, вам нужно будет отрегулировать ширину в процентах - например, для четырех элементов ширина будет составлять 25%.

1
whostolemyhat

Я не понимаю ваш вопрос ясно, поэтому я предположил, что вы можете захотеть это:

li {
    border:solid 1px red;
    clear:both;
    display:block;
    float: left;
    margin: 5px;
    width:100%;
}
ul {
    text-align: center;
    width:300px;
}
0
Wilf