barra de navegación que se adapta a resoluciones más pequeñas

Question

Estoy probando HTML5/CSS3 como un proceso de aprendizaje, pero me cuesta crear una barra de navegación para enlaces a otras secciones de mis páginas. He adaptado el código de un tutorial encontrado y funciona, pero solo cuando se ve en una resolución de 1080p, si el ancho es menor, la barra se ajusta a otras líneas.

¿Cómo me aseguro de que la barra de navegación solo ocupa una línea (se contrae para ajustarse) independientemente de la resolución que esté usando el usuario?

Aquí está mi código CSS para la barra de navegación. Tenga en cuenta que, en Nav, he establecido un ancho de 33.3% y relleno en el mismo para centrar los botones. No sé si esta es 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

Casi lo hizo correctamente. El problema con su CSS es que white-space: nowrap; solo funciona para los elementos inline, pero está usando float. Los elementos flotantes se convierten en nivel de bloque incluso si establece la propiedad display: inline; en dicho elemento (no se aplicará). Por lo tanto - si reemplaza sus flotadores con display: inline-block; - su propiedad white-space funcionará :)

Un ejemplo vivo de inline-block s white-space y se puede ver aquí: http://jsfiddle.net/skip405/wzgcH/

En cuanto a su método de centrado - hay una solución mejor . (Puede eliminar padding y establecer el ancho adecuado) Especialmente si está usando bloques en línea. Simplemente establezca text-align: center; en su padre - y lo tendrá centrado.

Answer 2

El problema es que está configurando el ancho nav ser un mero 33,3% siendo el resto relleno. El pequeño espacio permitido empuja a todos los elementos uno debajo del otro cuando se cambia de tamaño después de cierto punto. Para evitar que esto suceda, puede hacer dos cosas, establecer el ancho de navegación para ser 100% en su lugar, y segundo, si no desea que cambie el tamaño en absoluto, debe darle un min-width de la suma de todos los a anchos de elementos juntos. También debería darle un max-width, a menos que esté usando un diseño receptivo. Aquí hay una demostración que preparé con su css modificado: http://jsfiddle.net/c3HE6/