как сделать меню ul li css с переменным расстоянием между элементами

Идея состоит в том, чтобы сделать меню с фиксированным количеством пунктов. Каждый из элементов должен иметь фиксированный отступ, чтобы они выглядели достойно при размещении вокруг них рамки. (пока все хорошо) Но эти элементы должны быть распределены в div с фиксированным размером, равномерно распределенным - сами элементы не будут одного размера, поскольку это зависит от текста внутри этих элементов.

Чего я не могу понять, так это того, как убедиться, что элементы находятся на 1 строке с динамическим (более или менее) равномерным интервалом между ними в фиксированном div (в моем случае 1000 пикселей). Первый элемент должен быть выровнен по левому краю div. Последний элемент должен быть выровнен по правому краю div.

Ниже то, что у меня есть до сих пор. Это уже добавляет к нему отступы и границу, но я не могу установить для него margin: 0 auto, ну, я могу, но это ничего не делает. Основная проблема заключается в том, что расстояние между ними должно быть динамическим, потому что элементы имеют тенденцию перескакивать при масштабировании браузера, что, в свою очередь, нарушает выравнивание внешних элементов и даже заставляет некоторые элементы переходить на следующую строку. Вот почему (масштабирование все портит, особенно с фиксированной шириной) я не хочу указывать фактическую ширину для каждого из элементов (я знаю, что мне нужна ширина, чтобы правильно использовать margin: 0 auto, но даже когда я использую ширину , похоже, он не делает то, что я хочу).

<div id="navigation">
    <ul>
        <li class="menu-1"><a href="" >Home</a></li>
        <li class="menu-2"><a href="" class="">Nieuws</a></li>
        <li class="menu-3"><a href="" class="">Producten</a></li>
        <li class="menu-4"><a href="" class="">Algemene informatie</a></li>
        <li class="menu-5"><a href="" class="">Promoties</a></li>
        <li class="menu-6"><a href="" class="">Algemene voorwaarden</a></li>
        <li class="menu-7"><a href="" class="">Contact</a></li>
    </ul>
</div>

#navigation ul {
    margin:0px;
    padding:0px;
    list-style:none;
    width:1000px;   
    display:block;
}

#navigation li {
    float: left;
    display:inline;
}

#navigation li a {
    padding:10px 15px 10px 15px;
    float:right;

    display: block;
    border: 0.1em solid #dcdce9;
    color: #6d6f71;
    text-decoration: none;
    text-align: center; 
    font-size:18px;
    font-weight:bold;
}

#navigation{
    width:100%;
}

menu padding css margin html-lists
person 3xil3    schedule 24.05.2012    source источник
comment
В конце концов, модель flexbox решит эту проблему.   -  person Neil    schedule 25.05.2012

Ответы (2)


arrow_upward
2
arrow_downward

Проще всего было бы использовать таблицу вместо элементов li: вы можете определить ширину таблицы, и ширина ячеек будет рассчитана автоматически.

Вы можете задать им ширину в %, чтобы они были равными, или решить, чтобы они были адаптированы пропорционально.

Не нужно бояться таблиц: иногда они делают работу проще.

person Denys Séguret    schedule 24.05.2012
comment
В соответствии с исходной спецификацией вам нужно будет чередовать ячейки меню (которые должны быть сжаты) с пустыми ячейками (которые должны бороться друг с другом за оставшееся место). - person Neil; 25.05.2012
comment
или играть с границей и полем, или промежутками внутри ячеек, зависит от конечного желаемого эффекта. Но, конечно, дополнительные клетки могут быть полезны. - person Denys Séguret; 25.05.2012
comment
Я всегда считал использование таблиц для нетабличных потребностей плохой практикой, но стоит подумать, поскольку ни одно другое решение еще не приблизилось к тому, что мне нужно. - person 3xil3; 25.05.2012
comment
Это было преувеличением: проблема в основном возникает, когда вы используете таблицы для обычной верстки (многие медленно переходили на css). Но если вы осторожны, нет необходимости избегать инструмента, который лучше всего подходит для решения проблемы в конкретном случае. - person Denys Séguret; 25.05.2012

arrow_upward
1
arrow_downward

Использование режимов отображения таблицы: http://jsfiddle.net/pnUdp/1/

#navigation {
    margin:0px;
    padding:0px;
    display:table;
    width:1000px;
    border-collapse: collapse;
}

#navigation ul{
    margin:0px;
    padding:0px;
    list-style:none;
    display:table-row-group;
}

#navigation li{
    display:table-cell;
    border: 0.1em solid #dcdce9;
    vertical-align: middle;
}

#navigation li a{
    padding:10px 15px 10px 15px;
    display:block;
    color: #6d6f71;
    text-decoration: none;
    text-align: center; 
    font-size:18px;
    font-weight:bold;
}

Я не уверен, насколько это кроссбраузерно...

person Rob Lowe    schedule 24.05.2012
comment
Как сделать так, чтобы расстояние между элементами было динамически равномерным? Этот код помещает элементы в одну строку без интервала между элементами. Я добился того же эффекта с версией меню с плавающей точкой: слева, но я не мог понять, как добиться автоматического интервала между элементами. - person 3xil3; 25.05.2012
comment
Я изменил css, чтобы разрешить интервал между элементами: jsfiddle.net/pnUdp/7 — будьте осторожны хотя если какой-либо текст разбивается на 2 строки, все становится странно. - person Rob Lowe; 25.05.2012