Zuzle в рубрику HTML и CSS

Вопрос: Верстка резинового горизонтального меню

Имеется горизонтальное меню, оно резиниться по ширине, каждый пункт это ссылка с display:block; которая тоже резиниться в зависимости от длины текста.

Задача: сделать так, что бы между пунктами меню было одинаковое расстояние.

Найденное решение:

<table cellspacing="0" cellpadding="0" border="0">
	<tbody>
		<tr>
			<td width="6%"></td>
			<td>item 1</td>
			<td width="12%"></td>
			<td>item 2</td>
			<td width="12%"></td>
			<td>item 3</td>
			<td width="12%"></td>
			<td>item 4</td>
			<td width="12%"></td>
			<td>item 5</td>
			<td width="12%"></td>
			<td>item 6</td>
			<td width="12%"></td>
			<td>item 7</td>
			<td width="12%"></td>
			<td>item 8</td>
			<td width="6%"></td>
		</tr>
	</tbody>
</table>


Сделал в коде список ul, потом с помощью JS заменяю его на таблицу, где динамически к пустым ячейка высчитывается ширина.

Вопрос
Как реализовать то же самое без JS ? ну или хотя бы без таблицы?

Задайте свой вопрос

Если у вас есть вопрос по разработке или дизайну сайтов, вы можете задать его на Временно.нет и тысячи наших читателей помогут вам найти на него ответ.

Задать свой вопрос

Расскажите друзьям

Ответы на вопрос — 3

Dmitry Scriptin
В CSS3 есть отдельные решения (display:table) и модули для этого (flexbox), но они поддерживаются только новыми браузерами. Так что или таблицей, или с JS. Рекомендую оставить JS-вариант с фолбеком на что-нибудь простое.

Почитайте статью "Какой расклад?" - там есть ссылки на нужные документы.

P.S. Если ширина блоков настраивается автоматом, то таблица вам не нужна - используйте свойство float в комбинации с margin/padding.
Zuzle
Dmitry Scriptin, в финале сделал что бы в современных браузерах было display:table / display:table-cell

в IE js'ом список заменяется на таблицы
#
Zuzle
Виталий
вот например
< t d w i d t h = \" 1 2%\" > < / t d >
< t d > Навигация < / t d >
Как мне еще добавить какой нибудь раздел нр только чтобы вниз было?

Новый ответ

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler