[SOLUCIONADO] Duda con espacio entre items del Menu

UNDR4 · #1 (**permalink**) 18/09/2013, 17:22

Hola amigos, estoy realizando un menú para navegación, solo que tengo la duda de porque me pone un espacio entre cada ítem del mismo, tengo el margen en 0 y aun así me lo muestra, si alguien me pudiera decir porque se lo agradecería mucho.

Mi código

Código HTML:

Ver original<!DOCTYPE html >
<html lang="es">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Template</title>
    <link href='css/estilos.css' type='text/css' rel='stylesheet' />
  </head>
  <body>
    <div id='container'>
      <div id='header'>
        <div id="img_header"><img src="img/header.png" alt="Logotipo" /></div>
      </div>
      <div id='nav'>
        <ul>
          <li><a href='index.php'>BIENVENIDA</a></li>
          <li><a href='PrdCab.php'>HISTORIA</a></li>
          <li><a href='PrdCab.php'>EMPRESA</a></li>
          <li><a href='PrdCab.php'>PRODUCTOS</a></li>
          <li><a href='PrdCab.php'>DISTRIBUCION</a></li>
          <li><a href='Contacto.php'>CONTACTO</a></li>
          <li><a href='PrdCab.php'>BOLSA DE TRABAJO</a></li>     
        </ul>
      </div>
      </div>
  </body>
</html>

Código CSS:

Ver original@charset "utf-8";
*
{
    margin: 0;
    padding: 0;
}
body
{
    background: #FFFFCC url('../img/bgadmin.jpg');
    text-align: center;
}
a
{
    text-decoration:none;
    color:#000;
}
#container
{
    margin: 0 auto;
    width: 90%;
}
#nav
{
    margin: 0 auto;
    width: 65%;
}
#nav ul
{
    background-color: #00CB4D;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size:11px;
    font-weight:bold;
    list-style-type:none;
}
#nav ul li
{   
    display:inline-block;
    margin: 0;
    border: 1px solid #000;
    padding: 5px;
}
#nav ul li a
{
    color: #FFF;
    display:block;
}
#nav ul li:hover
{
  background-color: #0E691E; 
  color: #fff;
}

Imagen:

pzin · #2 (**permalink**) 18/09/2013, 17:48

Usa un margen lateral negativo o junta los elementos en el HTML de esta forma:

Código HTML:

Ver original<li>...</li><li>
...</li><li>
...</li><li>
...</li>

El espacio es creado porque son elementos en linea, o inline-block, y el salto en el HTML.

Otra posibilidad, algo más limpia, es flotar esos elementos y hacer alguna pirulilla para que aparezcan centrados.

UNDR4 · #3 (**permalink**) 18/09/2013, 17:55

Gracias por la respuesta