avvolgimento barra di navigazione su risoluzioni più piccole

Question

Mi sto cimentando con HTML5/CSS3 come processo di apprendimento ma sto cercando di creare una barra di navigazione per i collegamenti ad altre sezioni nelle mie pagine. Ho adattato il codice da un tutorial trovato e funziona ma solo se visualizzato su una risoluzione di 1080p, se la larghezza è minore, la barra si avvolge su altre linee.

Come faccio a garantire che la barra di navigazione occupi solo una riga (si restringe per adattarsi) indipendentemente dalla risoluzione che l'utente sta utilizzando?

Ecco il mio codice CSS per la barra di navigazione. Si prega di notare, sotto nav ho impostato larghezza al 33,3% e riempimento allo stesso per centrare i pulsanti. Non so se questa è la causa.

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

Hai quasi fatto correttamente. Il problema con il tuo css è che white-space: nowrap; funziona solo per gli elementi inline, ma stai utilizzando float. Gli elementi mobili diventano a livello di blocco anche se si imposta la proprietà display: inline; a un tale elemento (non verrà applicato). Quindi - Se si sostituisce il carri con display: inline-block; - la vostra proprietà white-space funzionerà :)

Un esempio vivo di inline-block s e white-space può essere visto qui: http://jsfiddle.net/skip405/wzgcH/

Per quanto riguarda il metodo di centratura - c'è una soluzione migliore . (È possibile rimuovere lo padding e impostare la larghezza corretta) Specialmente se si utilizzano blocchi in linea. Basta impostare text-align: center; sul loro genitore - e lo avrete centrato.

Answer 2

Il problema è che si sta impostando la larghezza nav di essere un mero 33,3% con il resto essendo imbottitura. Il piccolo spazio consentito spinge quindi tutti gli elementi sotto l'altro quando vengono ridimensionati oltre un certo punto. Per evitare che ciò accada, puoi fare due cose, impostare invece la larghezza del nav al 100% e in secondo luogo, se non vuoi ridimensionarlo, devi dargli un min-width della somma di tutti i a le larghezze degli elementi messe insieme. Probabilmente dovresti anche dargli un max-width a meno che tu non stia usando un design reattivo. Ecco una demo che ho messo insieme al tuo css modificato: http://jsfiddle.net/c3HE6/