Есть ли способ создать горизонтальную навигацию на всю ширину без использования таблицы?

Question

У меня горизонтальная навигация с переменной шириной «кнопок». Я хотел бы, чтобы навигация охватывала всю ширину содержащего элемента div. Я смог сделать это, если бы я поместил навигацию в таблицу. Вы можете проверить этот пример . Размеры ячеек таблицы изменятся в соответствии с их количеством и шириной текста внутри них.

Можно ли это сделать без использования таблицы?

Редактировать: Чтобы уточнить, мне нужно, чтобы ширина кнопок была гибкой. Клиент может обновить количество кнопок и текст этих кнопок в любое время через CMS. Мне нужно решение, которое не требует обновления CSS.

Answer 1

Использовать элемент списка

<ul>
  <li><a href="...">entry 1</a></li>
  <li><a href="...">entry 2</a></li>

   ... etc

</ul>

Применить 'float: left;' и ширина в процентах к каждому из элементов 'li'. Ширина, которую вы выберете, будет зависеть от количества записей. Чтобы убедиться, что элементы очищены правильно, примените 'overflow: hidden' к родительскому ('ul') элементу.

EDIT:

Может быть, равномерное распределение горизонтального пространства на самом деле не желательно во всех случаях?

• Если у вас есть несколько элементов, визуальный эффект будет сильно отличаться от полного Панель навигации.
• Там будет точка где вы должны искусственно ограничить номер элемента, который может быть добавлено.

Расширение для подхода, описанного выше, может состоять в выравнивании по правому краю последнего элемента 'li', что обеспечит вам панель навигации с фиксированными значениями.

Answer 2

Ken,

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

Вот несколько примеров: http://phoenity.com/newtedge/horizontal_nav/ Это отличный пример, который покажет вам как «встроенную» версию, так и «блочную» версию. Причина для двух заключается в том, чтобы сделать его более динамичным. «Встроенная» версия будет использовать указанную ширину, в то время как «блочная» версия предназначена для заполнения всего родительского элемента.

http://veerle.duoh.com/blog/comments/2_level_horizontal_navigation_in_css_with_images/ https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5153115.html

Важная часть, на которую следует обратить внимание, если вы делаете это для какой-либо формы компании или для чего-то, что будет приносить деньги, вам нужно убедиться, что они совместимы с IE (с 5.5-7), большинство хороших , но некоторые просто отказываются вкладывать эту совместимость. Если вам нужна помощь с этим, я уверен, что сообщество поможет вам, я знаю, что буду помогать.

Answer 3

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

Однако вы можете сделать это в CSS с кучей DIV s float рядом друг с другом, каждый из которых имеет ширину фиксированного % возраста общей ширины.