Nawijanie paska nawigacji w mniejszych rozdzielczościach

Question

Próbuję swoich sił w HTML5/CSS3 jako proces uczenia się, ale staram się utworzyć pasek nawigacyjny dla linków do innych sekcji na moich stronach. Zaadaptowałem kod z odnalezionego samouczka i działa, ale tylko przy oglądaniu w rozdzielczości 1080p, jeśli szerokość jest mniejsza, pasek owija się na inne linie.

Jak upewnić się, że pasek nawigacyjny zajmuje tylko jedną linię (maleje, aby dopasować), niezależnie od rozdzielczości używanej przez użytkownika?

Oto mój kod CSS na pasku nawigacyjnym. Proszę zauważyć, że pod nav ustawiłem szerokość na 33,3% i dopełnienie do tego samego w celu wyśrodkowania przycisków. Nie wiem, czy to jest powód. ustawiania szerokości nav być jedynie 33,3%, a resztę stanowi dopełnienie

nav { 
    display:block; 
    position: absolute; 
    left:0; 
    white-space:nowrap; 
    margin: 0 auto; 
    width: 33.3%; 
    background-color:#ff6600; 
    padding-left: 33.3%; 
    padding-right: 33.3%; 
} 

nav ul { 
    margin: 0 auto; 
    width: 100%; 
    list-style: none; 
    display: inline; 
    white-space:nowrap; 
} 

nav ul li { 
    float: left; 
    position: relative; 
    white-space:nowrap; 
} 

nav ul li a { 
    display: block; 
    margin: 0 auto; 
    width: 150px; 
    font-size: 16px; 
    font-family: century gothic; 
    line-height: 44px; 
    text-align: center; 
    text-decoration: none; 
    color:#575757; 
    white-space:nowrap; 
} 

nav ul ul { 
    width: 200px; 
    position:absolute; 
    top:-99999px; 
    left:0; 
    opacity: 0; 
    -webkit-transition: opacity .4s ease-in-out; 
    -moz-transition: opacity .4s ease-in-out; 
    -o-transition: opacity .4s ease-in-out; 
    transition: opacity .4s ease-in-out; 
    z-index:497; 
    background:#333; 
    padding: 2px; 
    border:1px solid #444; 
    border-top:none; 
    box-shadow:#111 0 3px 4px; 
} 


nav ul ul li a { 
    display: block; 
    width: 200px; 
    text-align: left; 
    padding-left: 3px; 
    font-size: 14px;  
} 



nav ul li:hover>ul{ 
    opacity: 1; 
    position:absolute; 
    top:98%; 
    left:0; 

} 


nav ul li a:hover { 
    color: #fff; 
    background-color: #cc3300 
} 

nav ul li.selected a { 
    color: #fff; 
    background-color: #cc3300; 
} 

Answer 1

Prawie zrobiłeś to poprawnie. Problem z twoim css polega na tym, że white-space: nowrap; działa tylko dla elementów inline - ale używasz float. Elementy pływające stają się blokowe, nawet jeśli ustawisz właściwość display: inline; na taki element (nie zostanie zastosowany). Więc - jeśli zastąpić pływaków z display: inline-block; - nieruchomość white-space zadziała :)

Żywo przykładem inline-block s oraz white-space można zobaczyć tutaj: http://jsfiddle.net/skip405/wzgcH/

Co do metody centrowania - istnieje lepsze rozwiązanie . (Możesz usunąć padding i ustawić odpowiednią szerokość) Zwłaszcza jeśli używasz bloków wbudowanych. Po prostu ustaw text-align: center; na swoim rodzicu rodzica - i będziesz mieć go wyśrodkowany.

Answer 2

jest problem. Mała dopuszczalna przestrzeń przesuwa wszystkie elementy pod siebie, zmieniając rozmiar po określonym punkcie. Aby temu zapobiec, możesz zrobić dwie rzeczy, ustawić szerokość nav na 100%, a po drugie, jeśli w ogóle nie chcesz zmienić rozmiaru, musisz dać mu min-width z sumy wszystkich a łączone szerokości elementów. Powinieneś również najprawdopodobniej nadać mu max-width, chyba że używasz responsywnego projektu. Oto wersja demo, którą umieściłem razem z Twoim zmodyfikowanym css: http://jsfiddle.net/c3HE6/