Блог

Главная - Вопросы по программированию - Динамически заполняемая навигация

Динамически заполняемая навигация

#css #twitter-bootstrap #navigation

#css #twitter-bootstrap #навигация

Вопрос:

У меня есть адаптивная навигация с несколькими ссылками.

Исторически мы устанавливали ширину для каждого из <li> них индивидуально.

Тем не менее, я бы хотел разместить ссылки в навигации, равномерно заполняя всю ширину содержимого <ul> .

Есть ли хороший способ сделать это, желательно не используя Javascript.

Комментарии:

1. это то, чего вы пытаетесь достичь? jsfiddle.net/webtiki/Q68jy

2. Вы могли бы использовать документы flexbox w3 , которые получают поддержку , и руководство

Ответ №1:

Один из самых простых способов — использовать ячейку таблицы layout…no , не фактическая таблица, но…

JSfiddle

CSS

 * {
    box-sizing:border-box;
    margin: 0;
    padding: 0;
}

ul{
    width:100%;
    display: table;
}
li{
    display: table-cell;
    height:50px;
    border:1px solid grey; /* visual reference only */
    background:#bada55; /* visual reference only */
    list-style-type:none;
}

Комментарии:

1. Есть ли причина не использовать таблицу? это только потому <ul> , что «s короче для записи?

2. Возможно, нет, но в целом рекомендуется, чтобы таблицы предназначались для фактических табличных данных , а не для базового макета. То, что мы имеем здесь, не соответствует этим критериям, но мы можем использовать «табличные» свойства CSS, чтобы подделать это.