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

Question

Я попытался сделать встроенный список навигации. Вы можете найти его здесь: 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;
}

Answer 1

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

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

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

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

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