alinear horizontal lista en div

trevol · #1 (**permalink**) 29/08/2010, 16:54

hola amigos tengo este código y me gustaría que me ayudarais a alinear la lista de forma horizontal. Se que es con display:inline pero no se donde aplicarlo os dejo código.

Código HTML:

 <style type="text/css">

#logo
{
margin-left:150px;
width: 900px;
height: 200px;
background:  url(la.JPG) no-repeat;
}
#menu
{
margin:auto;

text-align:center;
width: 900px;
height: 200px;
margin-left:230px;
background:  url(menu.JPG) no-repeat;
}

</style>
</head>

<body>
<div id="logo"></div>
<div id="menu">
<ul>
<li >home</li>
<li >home</li>
<li >home</li>
<li >home</li>
</ul>
</div>
</body>
</html>

tendria que quedar la lista dentro del menú, gracias.

deirdre · #2 (**permalink**) 29/08/2010, 19:46

Hola trevol

Mira si algo así, ajustándolo a tus medidas, te puede servir:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Menu lista centrada</title>
 <style type="text/css">
* {
	margin: 0; padding: 0;
}
#menu {
	margin: auto;
	width: 900px;
	height: 200px;
	background:  url(menu.JPG) no-repeat;
	border: 1px solid #444;
	text-align: center
}
ul {
	padding: 50px;
}
li {
	list-style: none;
	display: inline; 
	margin: 0 40px 0 40px;
}
</style>

</head>

<body>
<div id="menu">
	<ul>
		<li>home</li>
		<li>home</li>
		<li>home</li>
		<li>home</li>
	</ul>
</div>

</body>
</html>

Saludos

trevol · #3 (**permalink**) 30/08/2010, 04:49

Muchísmas gracias, Deirdre me vale ajustándolo un poco.