Pozycja szerokość/wysokość elementu CSS nie działa

Question

Próbowałem utworzyć listę liniową do nawigacji. Możesz go znaleźć tutaj: http://www.luukratief-design.nl/dump/parallax/para.html

Z jakiegoś powodu nie wyświetla ona szerokości i wysokości LI. Oto fragment. Co jest z tym nie tak?

.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

stwierdzenie element a jak display: inline-block i upuść szerokość i wysokość od elementu li.

Alternatywnie, zastosuj element float: left do elementu li i użyj display: block na elemencie a. Jest to nieco bardziej kompatybilne z przeglądarkami, ponieważ display: inline-block nie jest na przykład obsługiwane w przeglądarce Firefox < = 2.

Pierwsza metoda umożliwia posiadanie dynamicznie wyśrodkowanej listy, jeśli element ul ma szerokość 100% (tak aby obejmował od lewej do prawej krawędzi), a następnie zastosować text-align: center.

Użyj pozycji line-height, aby kontrolować pozycję Y tekstu wewnątrz elementu.

Answer 2

Myślę, że problem polega na tym, że próbujesz ustawić szerokość na element śródliniowy, co do którego nie jestem pewien. Ogólnie rzecz biorąc, Li jest blokiem i to działałoby.

Answer 3

Stosowanie szerokości/wysokości w elementach wstawianych nie zawsze jest dobrym pomysłem. Możesz użyć display: inline-block zamiast

Answer 4

Elementy śródliniowe nie mogą mieć szerokości. Musisz użyć display: block lub display:inline-block, ale ta ostatnia nie jest obsługiwana wszędzie.

Answer 5

Usuń <br> ze stylów .navcontainer-top li.

Answer 6

Miałem podobny problem, próbując naprawić rozmiar przedmiotu, aby dopasować go do szerokości obrazu tła. To zadziałało (przynajmniej z Firefoksem 35) dla mnie:

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