Comunidad de diseño web y desarrollo en internet online

Alineacion de elementos li

Citar            
MensajeEscrito el 28 May 2012 05:12 pm
hola tengo un problema y no se como arreglarlo, el tema es que tengo una etiqueta nav con una lista desordenada adentro y unos enlaces y quiero que se em distribuya cada li mas o menos equidistantes en el nav. que codigo css se utiliza.

mi codigo html es

Código HTML :

<nav>
               <ul>
                <li><a href="#" title="Inicio">Inicio</a></li>
                <li><a href="#" title="Acerca De">Acerca De</a></li>
                <li><a href="#" title="Servicios">Servicios</a></li>
                <li><a href="#" title="Contacto">Contacto</a></li>
               </ul>
            </nav>

y el css es

Código CSS :

nav{
   background-color:#0f67A1;
   list-style:none;
   width:60%;
   height:25px;
   padding:5px;
   float:right;
   margin-top:100px;
   margin-right:20px;
   border-radius:5px;
   
}
nav ul{
   display:inline;
   }
nav ul li{
   display:inline;
   text-align:center;
   }
nav a{
   font-size:18px;
   font-family:Verdana, Geneva, sans-serif;
   color: white;
   text-decoration:none;
}


aca hay una foto de como es que me queda el nav y abajo como quisiera que queden mas o menos para que me entiendan lo que quiero. Saludos

Por mostaza4

33 de clabLevel



Genero:Masculino  

Productor, Desarrollador, emprendedor

chrome
Citar            
MensajeEscrito el 29 May 2012 12:47 am

Código CSS :

nav ul li{
   display:inline-block;
   text-align:center;
   margin: 0 20px;
   }

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Front-end Developer

chrome
Citar            
MensajeEscrito el 11 Jun 2012 08:57 am
Hola, yo en lugar de darle un margen de 20 px en los laterales lo haría por % (ya que el ancho de tu nav es 60%); Como tienes 4 elementos en el nav, cada uno de ellos tiene que tener un 25% del ancho total del nav. algo así:

Código :

nav ul li {
     display:inline-block;
     text-align:center;
     widht:25%;
}

Por terreo76

12 de clabLevel



 

Diseñador web

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.