lista con css en horizontal

beinat · #1 (**permalink**) 22/11/2012, 06:59

Hola buenas, tengo un problemilla, haber si alguien sabria ayudarme, estaba viendo un ejemplo de unas lista <ul> y lo que queria conseguir era mostrar toda la lista el horizontal pero en la misma linea, es decir sin hacer un salto de linea.
el ejemplo seria este:

Código PHP:

  <html>

<head>

<title>Barra de navegación horizontal con listas y estilos CSS</title>

 
<style type="text/css">

#navegador ul{

   list-style-type: none;

   text-align: center;

}

#navegador li{

   display: inline;

   text-align: center;

   margin: 0 10px 0 0;

}

#navegador li a {

   padding: 2px 7px 2px 7px;

   color: #666;

   background-color: #eeeeee;

   border: 1px solid #ccc;

   text-decoration: none;

}

#navegador li a:hover{

   background-color: #333333;

   color: #ffffff;

}

   </style>

</head>

 
<body>

 
 
<div id="navegador">

<ul>

<li><a href="#">Elemento 1</a></li>

<li><a href="#">Elemento 2</a></li>

<li><a href="#">Elemento 3</a></li>

<li><a href="#">Elemento 4</a></li>

</ul>

</div>

 
</body>

</html>

con poco elementos queda bien, pero cuando se añaden mas elementos y ocupa toda la pantalla salta de linea, hay alguna forma de que no salte de linea?
Gracias por la ayuda

PhilComfortHost · #2 (**permalink**) 22/11/2012, 07:55

Hola! Cambia esto:

#navegador li{
float: left;
}
#navegador li a {
display: block;
padding: 2px 7px 2px 7px;
margin: 0px 10px 0px 0px;
color: #666;
background-color: #eeeeee;
border: 1px solid #ccc;
text-decoration: none;
}

beinat · #3 (**permalink**) 22/11/2012, 08:03

sigue haciendo igual, al llegar al final, cambia de linea

memoadian · #4 (**permalink**) 22/11/2012, 08:52

eso es por que tiene un ancho mayor que su contenedor. Tienes que modificar el ancho de cualquiera de las dos, por eso hace ese salto de linea que le llamas.

beinat · #5 (**permalink**) 22/11/2012, 12:45

y alguna idea para poder hacer eso? como deberia ponerlo?