lista - que es p en html

¿Cómo distribuir los elementos de manera uniforme(horizonatly)?

Question

Tengo un contenedor div en mi página web con ancho fijo y contiene elementos de formulario para iniciar sesión. Debajo de estos elementos hay un botón de enviar, un enlace de contraseña olvidado, etc.

Sucede que los elementos de la última línea necesitan menos ancho del que proporciona la caja. ¿Cómo distribuirlos uniformemente? Yo no quiero

• defecto

| A B C |

• centrando la línea como

| A B C |

• ni el diseño de la mesa

| A | B | C |

En cambio, estoy buscando alguna forma de CSS para lograr:

| A B C |

Es decir:

• poner el mismo espacio entre todos los elementos
• centrar todo para evitar el primero o el último al lado

editar: esta respuesta funcionó mejor. Creé plantillas para 2 o 3 elementos como este:

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

Answer 1

¿Qué tal text-align:justify; ?

Answer 2

Esto debería comenzar:

<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 luego el 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>

Solo agregué bordes para que pudieras ver lo que estaba haciendo el CSS.

Answer 3

No estoy seguro de cuál es tu HTML exacto, 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%;
}

Answer 4

Pruebe esto ( 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;
}

Como se trata de un bloque en línea, no puede haber espacios entre las etiquetas (feo, pero funciona), de lo contrario, el espacio estará visible.

Edición 1: Aquí hay más información sobre los problemas del bloque en línea: http://blog.another-d-mention.ro/programming/cross-browser-inline-block/ , http://www.aarongloege.com/blog/web-development/css/cross-browser-inline-block/ . También puede tener que agregar display: -moz-inline-box; .

Editar 2: Además, 33% * 3 no es 100%. Si realmente quieres un 100% y no te importa un espacio entre los div puedes hacerlo:

.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;
}

Answer 5

Los flexboxes CSS3 ahora tienen mejor compatibilidad con el navegador , aunque es posible que deba agregar prefijos adicionales para obtener más cobertura del navegador .

Enfoque moderno:

Simplemente cambie la display del elemento del contenedor a flex y luego utilice la propiedad justify-content para especificar cómo el navegador debe distribuir el espacio alrededor y entre los elementos flexibles a lo largo del eje principal.

En el siguiente ejemplo, notará que justify-content: space-around o justify-content: space-between se utilizan para espaciar los elementos de manera uniforme.

.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>