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

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

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

.navcontainer-top li {
    font-family: "Verdana", sans-serif;
    margin: 0;
    padding: 0;
    font-size: 1em;
    text-align: center;
    display: inline;
    list-style-type: none;<br>
    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;
}

Ответы

Ответ 1

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

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

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

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

Ответ 2

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

Ответ 3

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

Ответ 4

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

Ответ 5

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

Ответ 6

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

.navcontainer-top li
{
  display: inline-block;
  background: url("../images/nav-button.png") no-repeat;
  width: 117px;
  height: 26px;
}