меню как неупорядоченный список по горизонтали или таблицы? - PullRequest
2 голосов
/ 11 января 2010

У меня есть неупорядоченный список, который я показываю по горизонтали как верхняя строка меню страницы. Я получил его для отображения относительно хорошо, хотя я играл с пробелами для IE6 и IE7, потому что он не отображается правильно. Шокирующая. В любом случае, лучше ли использовать таблицу для отображения меню или использовать некоторые CSS-хаки, которые я не могу обойти? Как лучше всего отобразить меню? Я должен добавить, что некоторые опции имеют выпадающие меню с использованием их собственных неупорядоченных списков.

Ответы [ 3 ]

3 голосов
/ 11 января 2010

Оформить List-a-matic , в нем есть множество различных шаблонов меню, которые вы можете использовать в качестве базы.

Простой горизонтальный список можно отобразить с помощью css инеупорядоченный список

HTML

<div id="navcontainer">
 <ul id="navlist">
  <li id="active"><a href="#" id="current">Item one</a></li>
  <li><a href="#">Item two</a></li>
  <li><a href="#">Item three</a></li>
  <li><a href="#">Item four</a></li>
  <li><a href="#">Item five</a></li>
 </ul>
</div>

CSS

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
0 голосов
/ 11 января 2010

EDIT

Вы не можете зависеть от display: inline-block, чтобы справиться с этим, потому что кросс-браузерная поддержка проблематична. Вместо этого используйте поплавки с dispaly: inline; position: relative.

Я бы продолжил с UL. Не используйте хаки для IE * - используйте условные выражения IE для добавления разных таблиц стилей для разных версий IE.

0 голосов
/ 11 января 2010

Трудно дать точный ответ без SSCCE с вашей стороны (простой <html> документ, включающий в себя тип документа и встроенные стили), который воспроизводит точно проблему, с которой вы столкнулись. Но я могу, по крайней мере, сказать, что общая проблема заключается в том, что вы не правильно поняли тип документа , и что ошибка boxmodel IE играет здесь роль.

Если это не основная причина, то следующая возможная причина - сбой в понимании того, как использовать float и / или inline / block элементы. Чтобы получить хорошие и надежные примеры кода, начните с Google "suckerfish menu" .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...