Ширина / высота элемента списка CSS не работает

Я попытался сделать навигационный встроенный список. Вы можете найти его здесь: http://www.luukratief-design.nl/dump/parallax/para.html

По какой-то причине он не отображает ширину и высоту LI. Вот fragment. Что не так с этим?

.navcontainer-top li { font-family: "Verdana", sans-serif; margin: 0; padding: 0; font-size: 1em; text-align: center; display: inline; list-style-type: none;
width: 117px; height: 26px; } .navcontainer-top li a { background: url("../images/nav-button.png") no-repeat; color: #FFFFFF; text-decoration: none; width: 117px; height: 26px; margin-left: 2px; margin-right: 2px; } .navcontainer-top li a:hover { background: url("../images/nav-button-hover.png") no-repeat; color: #dedede; }

Объявите элемент как display: inline-block и снимите ширину и высоту с элемента li .

Кроме того, примените float: left к элементу li и используйте display: block a элемента a . Это немного более совместимо с перекрестным браузером, так как display: inline-block не поддерживается в Firefox <= 2, например.

Первый метод позволяет вам иметь динамически центрированный список, если вы даете элементу ul ширину 100% (чтобы он охватывал слева направо), а затем применяйте text-align: center .

Используйте line-height для управления Y-позицией текста внутри элемента.

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

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

Использование ширины / высоты для встроенных элементов не всегда является хорошей идеей. Вы можете использовать display: inline-block вместо

Удалите из стилей .navcontainer-top li .

У меня была аналогичная проблема, пытаясь исправить размер элемента, чтобы он соответствовал ширине фонового изображения. Это сработало (по крайней мере, с Firefox 35) для меня:

 .navcontainer-top li { display: inline-block; background: url("../images/nav-button.png") no-repeat; width: 117px; height: 26px; } 
  • родительский и дочерний с фиксированной позицией, родительское переполнение: скрытая ошибка
  • Смещение CSS-поля
  • Как сделать раскрывающееся меню Twitter Bootstrap, а не щелчком
  • CSS-анимация с задержкой для каждого дочернего элемента
  • Удаление нескольких classов (jQuery)
  • Появляется Chrome Font Blurry
  • Переполнение текста CSS в ячейке таблицы?
  • Является ли вложение данных фонового изображения в CSS в качестве хорошей или плохой практики Base64?
  • Границы gradleиента CSS3
  • Изменение ширины бутстрапа
  • Как вы затушевываете цвет фона с помощью jquery?
  • Давайте будем гением компьютера.