Menu con lista horizontal

FTotti · #1 (**permalink**) 08/03/2010, 10:09

Buenas a todos;

Estoy intentando hacer un menu horizontal dentro de una capa que se muestra a lo ancho de todo el navegador correctamente, pero cuando cambio el tamaño del navegador la lista me hace saltos de linea y entonces el menu me aparece en dos o tres lineas, alguien podría ayudarme por favor?????

patrick_ · #2 (**permalink**) 08/03/2010, 10:29

quieres que la lista sale fuera de la capa o que la capa tiene como anchura minima la anchura de la lista?

FTotti · #3 (**permalink**) 08/03/2010, 10:45

La lista se va fuera de la capa cuando cambio el tamaño del navegador

patrick_ · #4 (**permalink**) 08/03/2010, 11:07

para que no sale en dos lineas, añade al estilo del ul white-space:nowrap;

FTotti · #5 (**permalink**) 08/03/2010, 11:54

Que va así no va, sigue igual y lo peor es que he intentado no se cuantas cosas y no doy con el error, mi código css es el siguiente:

#Capa {
background-color: #CCCCCC;
margin:200px auto;
left:0px;
height:18px;}
li {
list-style-position: inside;
list-style-type: none;
float: left;
display: inline;
padding-left:25px;
}
ul {
white-space:nowrap;}

Y el de HTML:

<body>
<div id="Capa">
<ul>
<li>Inicio</li>
<li>Monumentos</li>
<li>Fiestas</li>
<li>Demografía</li>
</ul>
</div>
</body>

patrick_ · #6 (**permalink**) 08/03/2010, 12:33

no deberias usar float:left cuando usas display:inline

Impostor · #7 (**permalink**) 08/03/2010, 14:24

La cuestión es que usas una medida fija para el ancho, cuando el navegador se reduce, no queda mas remedio que ponerse en varias lineas. La solución, poner el ancho en unidades relativas (em).

Saludos¡¡

FTotti · #8 (**permalink**) 09/03/2010, 04:35

Impostor asi me ha servido, muchas gracias tio porque empezaba a desesperar y creo que no se me hubiese ocurrido nunca probar con las unidades en "em".