[SOLUCIONADO] Junta Opciones menú

bandolera · #1 (**permalink**) 11/03/2014, 08:00

Hola chicos!!!
Tengo un menú pero quiero que las cajas de las opciones estén juntas, una al lado de la otra, pero a mí me salen separadas. Estoy tratando de usar HTML5 y CSS3.
Qué le falta a mi código?
Gracias.

Código HTML:

<head>
	<link rel="stylesheet" type="text/css" href="css/estilos2.css"/>
</head>
<body>
		<nav>
			<ul>
				<li><a href="opcion1.html">Opcion 1</a></li>
				<li><a href="opcion2.html">Opcion 2</a></li>
				<li><a href="opcion3.html">Opcion 3</a></li>
				<li><a href="opcion4.html">Opcion 4</a></li>
			</ul>
		</nav>
</body>
</html>

Código HTML:

* {
	border: 0;
	margin: 0;
	padding: 0;
}

nav{
	display: block;
	border: solid;
}

body{
	font-family: Helvetica, Verdana;
	font-size: 1em;
}

a {
	color: darkgrey;
	text-decoration: none;
}

a:hover {
	color: blue;
}

nav {
	display: inline-block;
	max-width: 80% ;
}

nav ul {
	list-style: none;
}

nav li {
	display: inline-block;
	padding: 0 26px;
	vertical-align: top;
}

nav a {
	border: solid grey;
	display: block;
	font-family: Helvetica, Verdana;
	font-size: 1.4em;
}

nav a:hover {
	background: darkgrey;
	border: solid grey;
	color: white;
}

pzin · #2 (**permalink**) 11/03/2014, 08:06

Flota los elementos del menú en lugar de ponerlos como inline-block:

Código CSS:

Ver originalnav li {
  float: left;
  padding: 0 26px;
  vertical-align: top;
}

En lugar de:

Código CSS:

Ver originalnav li {
  display: inline-block;
  padding: 0 26px;
  vertical-align: top;
}

bandolera · #3 (**permalink**) 11/03/2014, 08:34

Cita:

Iniciado por pzin

Flota los elementos del menú en lugar de ponerlos como inline-block:

Código CSS:

Ver originalnav li {
  float: left;
  padding: 0 26px;
  vertical-align: top;
}

En lugar de:

Código CSS:

Ver originalnav li {
  display: inline-block;
  padding: 0 26px;
  vertical-align: top;
}

Ya lo hice, pero no ha variado mucho ah?

pzin · #4 (**permalink**) 11/03/2014, 09:04

Aparentemente no cambia mucho, no.

De todas formas pensé que querías hacer otra cosa. Viéndolo entendí mejor.

Entonces lo único que tendrías que hacer es eliminar el padding de los elementos de la lista ¿no?

bandolera · #5 (**permalink**) 11/03/2014, 14:09

Cita:

Iniciado por pzin

Aparentemente no cambia mucho, no.

De todas formas pensé que querías hacer otra cosa. Viéndolo entendí mejor.

Entonces lo único que tendrías que hacer es eliminar el padding de los elementos de la lista ¿no?

Al eliminar el padding se juntan, si pero las letras aparecen pegadas a la caja....
:(

pzin · #6 (**permalink**) 11/03/2014, 16:15

Pues le pones el relleno donde haga falta... No sé.

siddartha23 · #7 (**permalink**) 11/03/2014, 22:04

Solo tienes que quitarle 'padding:0 26px' a los ítems y ponérselo a los botones, puede que aún así te quede un pequeño espacio entre cada botón, esto se debe a los saltos de línea que haces entre <li></li> y <li></li> en el html, una posible solución es comentar los saltos de línea, algo así como esto:

Código HTML:

<ul>
     <li></li><!--
--><li></li><!--
--><li></li><!--
--><li></li>
</ul>