Равномерно распределенные ссылки по горизонтальной навигации

Я пытаюсь найти простой способ получить равномерное распределение всех ссылок по горизонтальной навигации. Это было бы очень легко, если бы это было фиксированное количество ссылок, но они будут динамичными.

Таким образом, это может быть 5 или 10 ссылок, никто не знает. Несмотря на количество ссылок, я бы хотел, чтобы они равномерно распределялись по навигации без с помощью таблицы.

Причина, по которой я не хочу использовать таблицу, состоит в том, что она нарушит структуру UL LI, которая (по-видимому) считается способным при создании навигации (SEO).

Здесь jsFiddle объясняет это более подробно: http://jsfiddle.net/pkK8C/19/

Поиск метода light.

Спасибо заранее.

Ответы

Ответ 1

Используйте display: table для UL и display: table-cell для LI. И display-table.htc для IE6/7, если они имеют значение.

Ответ 2

Старый браузер может быть головной болью, но он работает для новых:

div#navigation ul {
    list-style-type:none;
    height:30px;
    text-align:center;
    width: 100%;      /* new */
    display: table;   /* updated */
}

div#navigation ul li {        
    margin-left:50px;
    display: table-cell;  /* updated */  
}

Ответ 3

Вот решение jQuery, которое равномерно распространяет ссылки на 100% ограничивающего элемента. Левые и правые ссылки закрыты до конца.

JQuery

pad_menu() увеличивает заполнение до тех пор, пока последний li не поплавится ниже первого затем уменьшает заполнение на единицу, поэтому последний li возвращается на ту же строку. var я останавливает бесконечный цикл (чего никогда не должно было случиться).

  $(document).ready(function(){
    pad_menu();
  });

  function pad_menu() {
    var i = 0;
    var pos_first;
    var pos_last;
    var pad = $('#menu li').css('padding-left').replace(/[px]/, '');

    do {
      pad++;
      $('#menu li').css('padding-left', pad);
      $('#menu .first-item').css('padding-left', 0);
      $('#menu .last-item').css('padding-left', 0);
      pos_first = $('#menu .first-item').position();
      pos_last = $('#menu .last-item').position();
    } while (pos_first.top == pos_last.top && ++i < 100)
    $('#menu li').css('padding-left', pad-1);
    $('#menu li.first-item').css('padding-left', 0);
    $('#menu li.last-item').css('padding-left', 0);
  }

HTML и CSS:

ul#menu li {
display: inline;
float: none;
padding: 5px 0px 5px 20px;
}
ul#menu li.first-item, ul#menu li.last-item {
padding-left: 0px;
}

<ul id='menu' class='cols'>
  <li class='first-item'><a href='page1.html'>Page 1</a>
  <li><a href='page2.html'>Page 2</a></li>
  <li><a href='page3.html'>Page 3</a></li>
  <li><a href='page4.html'>Page 4</a></li>
  <li><a href='page5.html'>Page 5</a></li>
  <li><a href='page6.html'>Page 6</a></li>
  <li><a href='page7.html'>Page 7</a></li></a></li>
  <li class='last-item'></li>
</ul>

Ответ 4

Здесь более приятное решение, в котором вы используете text-align:justify:

Как я * действительно * оправдываю горизонтальное меню в HTML + CSS?

Внимательно прочитайте принятый ответ, но применимы следующие оговорки:

  • Пространства в тексте LI должны быть заменены на &ensp; или они будут считаться пробелами между вашими логическими элементами (&nbsp; не работа)
  • Вам нужно иметь пробелы в HTML между вашими LI (может если вы создаете их в петле PHP.