Как отобразить вкладки навигации с нужной рамкой?Таблица, список, что-то еще?

Question

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

Теперь они хотели бы представить 5-ю вкладку навигации (и, возможно, 6-ю). Можно ли закодировать это таким образом, чтобы можно было вставить туда 5-ю или 6-ю вкладку, и все изменится соответствующим образом со списками или таблицами или каким-либо другим решением? Все еще сохраняете разделение на 2 пикселя и точно выравниваете края? Я не был уверен, было ли это возможно, или вам просто нужно было бы каждый раз определять ширину для каждой вкладки на основе математической схемы, чтобы выровнять все правильно, вровень с краями.

Answer 1

Я думаю, что лучший способ - эмулировать поведение таблицы с помощью CSS.Таким образом, вы можете использовать список и по-прежнему получать поведение таблицы.

ul {
    display:table;
}
li {
    display:table-cell;
}

Вот демонстрационная версия , отображающая это с помощью CSS и правильной разметки. Вот демонстрация того, как это выглядит с реальной таблицей.Я не уверен, что IE <8 поддерживает этот CSS, так что это может быть что-то, о чем нужно знать.</p>

ОБНОВЛЕНИЕ : подтверждено: это не поддерживается в IE6 или 7 изначально.Вы можете застрять с таблицами или жестко запрограммированными значениями ширины, если хотите поддерживать эти браузеры.Может быть исправление javascript для поддержки этих display значений, но я не знаю об этом.

EDIT : я понял, что мои демонстрации были неаккуратными, поэтому я сделал другую, которая на самом деле адресованаВаша точка зрения о полях, она использует селектор :first-child, чтобы удалить поле из первой ссылки, создавая равномерно распределенный вид.http://jsfiddle.net/wesley_murch/pe6wd/3/

Answer 2

Вы пытались смотреть на LESS или SASS, чтобы вы могли сделать простую математику в CSS?

Answer 3

Это может быть нелегко.Одним из требований в большинстве реализаций горизонтальных типов меню css является установка фиксированной ширины для каждого элемента.Если вы попытаетесь сделать проценты, вещи начнут рушиться.Тем не менее, любая вещь возможна.