центрирование пунктов меню по горизонтали

Тема в разделе "Верстка", создана пользователем duncan, 28 авг 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. duncan

    duncan батяр з личакова

    Регистр.:
    10 апр 2007
    Сообщения:
    1.596
    Симпатии:
    441
    нетривиальная оказалась задача, суть которой -- чтобы пункты в горизонтальном меню были отцентрированы так, как будто они внутри ячеек таблицы
    задача усложнена тем, что меню должно быть резиновое, ибо верстка резиновая

    при стандартном центрировании пункты меню склеиваются друг с другом, а надо, чтобы растягивались

    HTML:
    
    <style type="text/css">
    *{ margin:0; padding:0;}
    ul{ width:800px; list-style:none; text-align:center; border:1px solid #000; padding:5px;}
    li{ display:inline; text-align:center; width:auto;}
    </style>
     
    <ul>
    <li>первая</li>
    <li>вторая</li>
    <li>третья</li>
    </ul>
    
    получится:

    [​IMG]

    а надо:

    [​IMG]
     
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.134
    Симпатии:
    668
  3. Extalionez

    Extalionez Клоун

    Заблокирован
    Регистр.:
    21 авг 2008
    Сообщения:
    368
    Симпатии:
    185
    ну кроме как на
    HTML:
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html" />
        <meta name="author" content="Extalionez" />
     
        <title>Неназванный 1</title>
    </head>
     
    <body>
     
    <style type="text/css">
    *{ margin:10% 10% 10%; padding:0;}
    ul{ width:800px; list-style:none; text-align:center; border:1px solid #000; padding:5px;}
    li{ display:inline; text-align:center; width:auto;}
    </style>
     
    <ul>
    <li>первая</li>
    <li>вторая</li>
    <li>третья</li>
    </ul>
     
    </body>
    </html>
    у меня ума не хватает. Удалите, плз, если бред.
     
  4. matiass

    matiass Создатель

    Регистр.:
    30 май 2007
    Сообщения:
    44
    Симпатии:
    7
  5. aaidlin

    aaidlin Создатель

    Регистр.:
    30 авг 2012
    Сообщения:
    20
    Симпатии:
    3
    значит так, должно помочь:
    для UL менюшки делаете CSS такое:
    {margin:auto; display:table; table-layout:fixed; border-collapse:collapse; width:100%; height:100%; list-style:none}

    для LI правила такие:
    {display:table-cell; text-align:center; vertical-align:middle}

    тег UL ложите в DIV, размер которого можете сделать любым.
     
  6. AlexandrSG

    AlexandrSG Создатель

    Регистр.:
    29 янв 2011
    Сообщения:
    18
    Симпатии:
    2
    это в html
    <ul>
    <li>Текст 1</li>
    <li>Текст 2</li>
    <li>Текст 3</li>
    </ul>

    это в стили
    ul li{
    float:left;
    width:33%;
    text-align:center;
    list-style-type:none;
    }

    Вот весь код, не занимайтесь извратом .)
     
    sarhov нравится это.
  7. zek24

    zek24

    Moderator
    Регистр.:
    14 ноя 2009
    Сообщения:
    778
    Симпатии:
    233
    Наверное, требовался универсальный код, для разного кол-ва li.
    А так width:33%; придется каждый раз пересчитывать %
     
  8. duncan

    duncan батяр з личакова

    Регистр.:
    10 апр 2007
    Сообщения:
    1.596
    Симпатии:
    441
    это подошло
    почти все супер, но кроме одного (!) -- пункты меню должны иметь отступ, иначе баг!
    так правильно:
    Код:
    <li>item</li>  <li>item</li>
    
    или так:
    Код:
    <li>item</li>
    <li>item</li>
    
    но не так:
    Код:
    <li>item</li><li>item</li>