barra de navegación horizontal hecha en CSS

* { border: 0px; margin: 0px; padding: 0px; } body { background-color: #FFC; } #wrapper { width:70%; margin: 0% auto; } #header { background-color: #C1D1FD; padding: 3%; } #nav { clear:both; padding: auto; position:inherit; background-color:#F0D5AA; width: auto; } #nav ul { list-style-type:none; } #nav a { display:block; float:left; padding:0%; width:20%; background-color:#F60; border-bottom:1px #fff solid; } #content { padding:7%; margin-left: 20%; background-color:#fff; } #footer { background-color: #C1D1FD; padding: 2%; text-align:center; } 

CÓDIGO HTML:

  

Page Heading

welcome

welcome

welcome

Hola, este es mi código CSS y HTML, estoy intentando hacer que mi barra de navegación se encuentre debajo de la barra de encabezado. pero el resultado de la barra de navegación aparece como zagged como escaleras. ¿Cómo puedo hacer que mis botones de la barra de navegación estén rectos? Gracias por el consejo,

Erradicé el problema de la escalera al eliminar una línea en el código CSS original. Comenta la position:inherit; Declaración dentro del bloque #nav .

Trate de eliminar esto: pantalla: bloque; y configura #nav ul li para mostrar: en línea;

este código está activo, pero puede cambiarlo para que se ajuste a sus necesidades:

 #nav { background-color:#F0D5AA; } #nav ul { list-style-type:none; padding-top:3px; padding-bottom:3px; } #nav ul li { display:inline; } #nav a:link, a:visited { text-align:center; padding:3px; }