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

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

Задача - меню, с произвольным набором пунктов, сделанное в виде списка (UL, LI) отобразить в одну строчку во всю ширину. Пример1: Пример2: Различия видны невооруженным глазом. Разбор кода внутри. Итак, код самого меню примеров: И стили. Выделены строки, которые дают такой эффект. Остальные чисто для украшения Пример 1: Пример 2: Различие в одной строке! Теперь, что происходит по порядку. Общее: display:table; - переводит элемент ul в режим таблицы width:100%; - растягивает ul на всю ширину display:table-cell; - говорит что li это ячейка таблицы Отличие: table-layout:fixed; - определяет, что ячейки таблицы должны быть одной ширины. В примере2 нет этого параметра, и ширина подбирается исходя из объема текста внутри ячейки. И главное - если у вас уже есть красивая менюшка на ul li, и вам ее надо растянуть - этот способ легко подойдет - надо только немного поправить стили.
Categories: CMS, HTML CSS JS Tags: , , , ,
1 звезда2 звезды3 звезды4 звезды5 звезд (1 votes, average: 1,00 out of 5)
Загрузка...
  1. andy
    21 августа 2012 в 13:19 | #1

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

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

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

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

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

  4. Артем
    15 февраля 2014 в 15:04 | #4

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

  1. Пока что нет уведомлений.


четыре + = 12

Heads up! You are attempting to upload an invalid image. If saved, this image will not display with your comment.