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

Question

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

Answer 1

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

PS: вам следует добавить правило для : focus

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

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

/* remember to define focus styles! */
:focus {
  outline: 0;
}