¿Cómo hacer que los niños sean de trabajo de los padres automáticos solo con CSS?

Question

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

Entonces necesito personalizar ese diseño para hacer todo A Etiquetas Auto ajustado al ancho principal. Pero el número de hijos es variable y el ancho de los padres no se conoce (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 (la falta de comment el último A Etiqueta para ver cómo no funciona, jajaja).

No puedo cambiar las fuentes del lado del servidor a Gerenate HTML con un ancho fijo. Y realmente me gustaría resolverlo solo con CSS si hay alguna forma, incluso eso con JavaScript 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 niños?

Answer 1

Esta ya es una pregunta bastante antigua. Aunque las respuestas dadas asistieron bien en ese momento, hoy en día el Diseño de caja flexible ofrece el mismo resultado con mucha más simplicidad, con buen apoyo 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

Puedes usar display: table-cell:

Ver: http://jsfiddle.net/6nsej/12/ (o con 5 hijos)

Esto no funcionará en IE7 porque ese navegador simplemente no admite display: table y amigos.

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

Answer 3

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");