Равномерно расположенное и выровненное горизонтальное меню со списком

Я искал и не нашел решения для разделения ряда lis для меню в стиле списка. Я понял, что один CSS не может этого сделать, поэтому я добавил немного javascript (jQuery). Мне не нужна была одинаковая ширина для каждого LI, я хотел ровное заполнение без остаточного пространства. Если кто-то может принять эту концепцию и упростить мой ужасный javascript или предложить альтернативы, пожалуйста, сделайте это. См. пример здесь: http://www.valweb.com/menuTest/


javascript menu jquery css center
person TPAV    schedule 03.10.2010    source источник
comment
Возможно, вы получите больше полезных ответов, если зададите этот вопрос на doctype.com.   -  person Ian Henry    schedule 03.10.2010

Ответы (1)


arrow_upward
1
arrow_downward

Поскольку только CSS может это сделать, а старые IE не могут, почему бы не использовать display: table; (and table-cell) по умолчанию (ваш второй пример просто великолепен) и использовать display: inline; zoom: 1; /* display: inline-block for IE */ padding: 0 Npx; для IE‹8 с помощью условных комментариев?
И, возможно, JS/jQuery если вы действительно должны заботиться о пользователях IE6/7, обслуживайте только их.

PS: вы должны добавить правило для :focus

.mainMenu li a:hover,
.mainMenu li a:focus {
  /* ... */
}

как Э. Мейер заявляет в комментариях к своей таблице стилей reset.css: ;-)

/* remember to define focus styles! */
:focus {
  outline: 0;
}
person FelipeAls    schedule 03.10.2010
comment
Спасибо, Фелипе. Я так привык к перезагрузке всего, что давно не читал его комментарии. Я включил CSS-таблицы в качестве примера, который меня не устроил. Однако я обнаружил, что моя проблема решена здесь stackoverflow.com/questions/1859243/ почти год назад. Очень похож на мой. - person TPAV; 03.10.2010