¿Cómo hacer que los niños ajusten automáticamente el ancho de los padres solo con CSS?

Question

Tengo un componente del lado del servidor que genera una "barra de herramientas" de diseño fluido usando DIV sin ancho fijo, generando muchos A dentro de él.

Luego necesito personalizar ese diseño para que todas las etiquetas A se ajusten automáticamente al ancho principal. Pero la cantidad de hijos es variable y no se conoce el ancho de los padres (se ajusta automáticamente a la ventana).

hice algunas pruebas con este violín: http://jsfiddle.net/ErickPetru/6nSEj/1/

pero no puedo encontrar una manera de hacerlo dinámico (descomentar la última A etiqueta para ver cómo se ins't de trabajo, lol).

No puedo cambiar las fuentes del lado del servidor para gerar HTML con ancho fijo. Y realmente me gustaría resolverlo solo con CSS si hay alguna manera, incluso con JavaScript que podría lograr ese resultado.

¿Cómo puedo hacer que todos los niños se ajusten automáticamente al ancho de los padres independientemente del número de hijos?

Answer 1

Esto ya es una vieja pregunta. A pesar de que las respuestas dadas asistieron bien en el momento, hoy en día el Flexible Box Layout ofrece el mismo resultado con mucha más simplicidad, con good support en todos los navegadores modernos. ¡Lo recomiendo encarecidamente!

/* Important parts */ 
 
.parent { 
 
    display: flex; 
 
} 
 

 
.parent a { 
 
    flex: 1; 
 
} 
 

 
/* Decoration */ 
 
.parent { 
 
    padding: 8px; 
 
    border: 1px solid #ccc; 
 
    background: #ededed; 
 
} 
 

 
.parent a { 
 
    line-height: 26px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    border: 1px solid #ccc; 
 
    background: #dbdbdb; 
 
    color: #111; 
 
}

<div class="parent"> 
 
    <a href="#">Some</a> 
 
    <a href="#">Other</a> 
 
    <a href="#">Any</a> 
 
</div> 
 

 
<br> 
 

 
<div class="parent"> 
 
    <a href="#">Some</a> 
 
    <a href="#">Other</a> 
 
    <a href="#">Any</a> 
 
    <a href="#">One More</a> 
 
    <a href="#">Last</a> 
 
</div>

Answer 2

Por ahora, muchos usan jQuery como solución a este problema. Todo lo que necesitas es una línea. Esto es de tu violín.

$("div.parent a").css("width", (($("div.parent").width()/$("div.parent a").length) -2) + "px"); 

Answer 3

Puede utilizar display: table-cell:

Ver:http://jsfiddle.net/6nSEj/12/(or with 5 children)

Esto no funcionará en Internet Explorer 7, ya que el navegador simplemente no soporta display: table y amigos.

div.parent { 
    .. 
    width: 100%; 
    display: table; 
    table-layout: fixed; 
} 
div.parent a { 
    .. 
    display: table-cell; 
}