Тянущееся меню на CSS (ul li) c выравниванием по ширине

Главная > CMS, HTML CSS JS > Тянущееся меню на CSS (ul li) c выравниванием по ширине

30 марта 2012 zabey Написать комментарий К комментариям

Задача - меню, с произвольным набором пунктов, сделанное в виде списка (UL, LI) отобразить в одну строчку во всю ширину. Пример1:

Пример2:

Различия видны невооруженным глазом. Разбор кода внутри. Итак, код самого меню примеров:

<ul id="menu">
    <li><a href="#">Главная</a></li>
    <li><a href="#">Галерея фотографий</a></li>
    <li><a href="#">Каталог</a></li>
    <li><a href="#">О нас</a></li>
</ul>

<li><a href="#">Главная</a></li>

<li><a href="#">Галерея фотографий</a></li>

<li><a href="#">Каталог</a></li>

</ul>

И стили. Выделены строки, которые дают такой эффект. Остальные чисто для украшения Пример 1:

#menu {
   display:table; 
   width:100%; 
   table-layout:fixed; 
   border-collapse:collapse;
}
#menu li { 
   display:table-cell; 
   background:#eee; 
   padding:.5em; 
   text-align:center; 
   border:1px solid silver; 
}

#menu {

display:table;

width:100%;

table-layout:fixed;

border-collapse:collapse;

}

#menu li {

display:table-cell;

background:#eee;

padding:.5em;

text-align:center;

border:1px solid silver;

}

Пример 2:

#menu {
   display:table; 
   width:100%; 
   border-collapse:collapse;
}
#menu li { 
   display:table-cell; 
   background:#eee; 
   padding:.5em; 
   text-align:center; 
   border:1px solid silver; 
}

#menu {

display:table;

width:100%;

border-collapse:collapse;

}

#menu li {

display:table-cell;

background:#eee;

padding:.5em;

text-align:center;

border:1px solid silver;

}

Различие в одной строке! Теперь, что происходит по порядку. Общее: display:table; - переводит элемент ul в режим таблицы width:100%; - растягивает ul на всю ширину display:table-cell; - говорит что li это ячейка таблицы Отличие: table-layout:fixed; - определяет, что ячейки таблицы должны быть одной ширины. В примере2 нет этого параметра, и ширина подбирается исходя из объема текста внутри ячейки. И главное - если у вас уже есть красивая менюшка на ul li, и вам ее надо растянуть - этот способ легко подойдет - надо только немного поправить стили.

Categories: CMS, HTML CSS JS Tags: li, menu, ul, width, меню

(1 votes, average: 1,00 out of 5)

Загрузка...

Комментарии (5) Уведомления (0) Написать комментарий Уведомление

andy

21 августа 2012 в 13:19 | #1

Ответить | Цитата

а как лечить для IE7 и мобильных браузеров? убогий способ
chum

23 августа 2012 в 06:00 | #2

Ответить | Цитата

Кросбраузерность и мобильность в этом способе не учтена, данный способ представлен как одно из решений, если у вас есть способ лучше, будем благодарны если вы его опубликуете у нас.Спасибо.
AA

10 февраля 2014 в 12:45 | #3

Ответить | Цитата

Спасибо, изящное решение.
Артем

15 февраля 2014 в 15:04 | #4

Ответить | Цитата

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

25 мая 2024 в 16:33 | #5

Ответить | Цитата

Люди добрые!
Как сделать оглавление (меню) сайта при помощи списков?
Как сделать его „резиновым“?