Cómo se propagan los elementos horizontalmente de manera uniforme?

Tengo un div contenedor en mi página web, con ancho fijo y contiene elementos de formulario de inicio de sesión. Por debajo de estos elementos, hay un botón de enviar, enlace "contraseña olvidada", etc.

Pasa los últimos elementos de la línea, necesita menos ancho de la caja ofrece. Cómo uniformemente? No quiero

  • por defecto
| A B C |
  • el centrado de la línea como
| A B C |
  • ni la tabla de diseño
| A | B | C |


En lugar de ello estoy buscando un poco de CSS manera de lograr:

| A B C |

Que es:

  • poner sobre espacios iguales entre todos los elementos
  • centro de todo el asunto para evitar el primero o el último de al lado

editar: Esta respuesta ha funcionado mejor. He creado plantillas para 2 o 3 elementos como este:

div.spread2evenly > div {
 display: inline-block;
 *display: inline; /* Para IE7 */
 zoom: 1; /* Disparador hasLayout */
 width: 50%;
 text-align: center;
}
  • Respuesta seleccionada
    Nelson Rothermel
    5 de noviembre de 2010

    Pruebe esta (http://jsfiddle.net/BYEw5/):

    <div class="container">
  <div>A</div><div>B</div><div>C</div>
</div>

.container > div {
    display: inline-block;
    display: -moz-inline-box;
    *display: inline; /* For IE7 */
    zoom: 1; /* Trigger hasLayout */
    width: 33%;
    text-align: center;
}

    Puesto que usted está tratando con inline-block, usted no puede tener espacios entre las etiquetas (feo, pero funciona), de lo contrario el espacio será visible.

    Edit 1: Aquí hay más información sobre la línea de bloque de cuestiones: http://blog.another-d-mention.ro/programming/cross-browser-inline-block/, http://www.aarongloege.com/blog/web-development/css/cross-browser-inline-block/. Usted también puede tener que añadir display: -moz-inline-box;.

    Edit 2: También, el 33%*3 no es del 100%. Si usted realmente quiere el 100% y no te importa un poco de espacio entre el divs que usted podría hacer:

    .container > div {
    display: inline-block;
    display: -moz-inline-box;
    *display: inline; /* For IE7 */
    zoom: 1; /* Trigger hasLayout */
    margin-left: 2%;
    width: 32%;
    text-align: center;
}

.container > div:first-child {
    margin-left: 0;
}

6 Respuestas

  • Diodeus - James MacFarlane
    5 de noviembre de 2010

    No estoy seguro de cuál es su exacta es HTML, pero prueba esto: http://jsfiddle.net/k9FqG/

    <div class="test">
    <a href="">A</a>
    <a href="">B</a>
    <a href="">C</a>
    <div class="clear"></div>
</div>

.clear {
   clear:both;   
}

.test {
   width:350px;
   text-align:center;
   border:1px solid #ff0000
}

.test a {
    display:block;
    float:left;
    width:33%;
}
  • Cᴏʀʏ
    5 de noviembre de 2010

    Esto debería ayudarle a empezar:

    <style type="text/css">

#container {
    width: 210px;
    border: 1px solid blue;
}

#container .part {
    width: 68px; /*(210 / 3 - borders)*/
    float: left;
    text-align: center;
    border: 1px solid yellow;
}

.clear {
    height: 0;
    line-height: 0;
    overflow: hidden;
    font-size: 0;
    clear: left;
}

</style>

    Y, a continuación, el código HTML:

    <div id="container">
    <div class="part">A</div>
    <div class="part">B</div>
    <div class="part">C</div>
    <div class="clear">&nbsp;</div>
</div>

    Sólo he añadido fronteras por lo que podía ver lo que el CSS estaba haciendo.

  • Nomistake
    20 de septiembre de 2012

    cómo acerca de text-align:justify; ?

  • Josh Crozier
    1 de enero de 2016

    CSS3 flexboxes tiene mejor soporte de los navegadores ahora, aunque puede que necesite añadir más vendedor de los prefijos de las más navegador de cobertura.

    Enfoque Moderno:

    Acaba de cambiar el display el elemento contenedor para flex y, a continuación, utilizar la justify-content propiedad para especificar cómo el navegador debe distribuir el espacio a su alrededor y entre el flex elementos a lo largo del eje principal.

    En el ejemplo de abajo, te darás cuenta que justify-content: space-around o justify-content: space-between se utiliza para el espacio de los elementos uniformemente.

    .container {
  display: flex;
}
.container.space-around {
  justify-content: space-around;
}
.container.space-between {  
  justify-content: space-between;
}
    <p>Using <code>justify-content: space-around</code>:</p>
<div class="container space-around">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<hr />

<p>Using <code>justify-content: space-between</code>:</p>
<div class="container space-between">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

  • Arun Kumar A.J
    20 de febrero de 2019

    Yo quería realizar algún efecto de hover y justify-content: space-between no estaba muy limpio. Esto ayudó para mí.

    <div style="display: flex;">
  <div style="flex: 1 1 auto"> A </div>
  <div style="flex: 1 1 auto"> B </div>
  <div style="flex: 1 1 auto"> C </div>
</div>

    (Principio tuve la respuesta de diferentes S. O. de respuesta una vez hace mucho tiempo. Que me perdonen por no mencionar original del crédito, como no sé)

  • Nick
    4 de mayo de 2019

    Sé que esto es una antigua pregunta, pero si alguien todavía se pasa a buscar por eso, ahora es una opción más fácil de usar flexboxes: justifiy-content: space-evenly. El nombre es bastante explicativo. Aquí una referencia

     .container {
  display: flex;
  justify-content: space-evenly;
}