Autocentrado de <li> con CSS
Hola, es posible hacer lo que se observa en la imagen mediante css, sin uso de tablas?
Lo estoy tratando de hacer mediante lis, ya que es un listado de categorías, pero tampoco se si es correcto hacerlo así.
El codigo por ahora va así:
<style>
.clr{
clear: both;
}
.big_grey_box{
width: 678px;
}
.big_grey_box ul{
background: #fff;
padding: 8px;
border: 8px solid #e5e5e5;
}
li.sub_categorias{
background: #a90329;
text-align: center;
width: 204px;
height: 28px;
float: left;
}
li.sub_categorias a{
font: 12px Arial;
color: white;
text-decoration:none;
}
</style>
<div class="big_grey_box">
<ul>
<li class="sub_categorias"><a href="#">Accesorios</a></li>
<li class="sub_categorias"><a href="#">Cables y Adaptadores</a></li>
<li class="sub_categorias"><a href="#">Desarrollo y Programacion</a></li>
<li class="sub_categorias"><a href="#">Reparacion</a></li>
<li class="sub_categorias"><a href="#">Tuning y Carcasas</a></li>
<div class="clr"></div>
</ul>
</div>
markshock
yo estoy con mr soriano, un div vacío? existiendo el mega-hiper-fantástico overflow:hidden;
Usuario desconocido
pixeliza
Lo primero te lo explico en el post de arriba
Para solucionar lo segundo, basta con que pongas:
.big_grey_box{
width: 678px;
overflow:hidden;
}
ul { width:110%;}
ul li {float:left; overflow:hidden;}
pixeliza
¡¡NUNCA!!
Usuario desconocido
Imanoltxi
Eso de un div vacío con clear es un apaño muy guarrete. Basta con que al ul le des un overflow:hidden para que coja la altura de los elementos flotados que contiene.
pixeliza
Bueno, lo he resuelto ahora mismo, me ha venido la inspiración.
Añadidos al selector del li esto:
border:5px solid #fff;Y listo :)
pixeliza
pixeliza
pixeliza
MrSoriano
Hola, olvide borrar el display block, no debería estar ahi.
Si quito el div clear, entonces el ul deja de tener height, tal y como comenta Imanoltxi.
Los li se pueden separar mediante margin-left o right, pero el problema es que entonces los li que estan en los bordes empujan el contenedor, haciendo que bajen a al siguiente linea, o quedando demasiado separados en caso de estar a la izquierda.
Si solo fueran 3 elementos no habria problema, usando o bien 3 selectores diferentes o bien jugando con pseudo clases como last-child, pero el problema es que ese listado de categorías es creado por php y algunas veces habra 2 li, 5 , 7 o lo que sea
Estoy empezando a pensar que la unica forma de hacerlo como quiero es con tablas.
Imanoltxi
MrSoriano
Usuario desconocido
Esto te sobra:
<div class="clr"></div>Esto en los li también ya que son elementos de bloque:
display: block;Por lo demás, tendrías que flotar los LI a la izquierda y si acaso hace álgún apaño más, pero vas por el buen camino.