Alinear las etiquetas en el formulario junto a la entrada

Tengo un escenario de forma muy básico y conocido donde necesito alinear las etiquetas junto a las entradas correctamente. Sin embargo, no sé cómo hacerlo.Alinear las etiquetas en el formulario junto a la entrada

Mi objetivo sería que las etiquetas estén alineadas al lado de las entradas del lado derecho. Aquí hay un ejemplo de imagen del resultado deseado.

enter image description here

me han hecho un violín para su conveniencia y para aclarar lo que tengo ahora - http://jsfiddle.net/WX58z/

Fragmento:

<div class="block"> 
 
    <label>Simple label</label> 
 
    <input type="text" /> 
 
</div> 
 
<div class="block"> 
 
    <label>Label with more text</label> 
 
    <input type="text" /> 
 
</div> 
 
<div class="block"> 
 
    <label>Short</label> 
 
    <input type="text" /> 
 
</div>

Fuente

2012-03-13 sed

138

Una posible solución:

Dale las etiquetas display: inline-block;
les dan un ancho fijo
Alinear texto a la derecha

Eso es:

label { 
 
    display: inline-block; 
 
    width: 140px; 
 
    text-align: right; 
 
}

<div class="block"> 
 
    <label>Simple label</label> 
 
    <input type="text" /> 
 
</div> 
 
<div class="block"> 
 
    <label>Label with more text</label> 
 
    <input type="text" /> 
 
</div> 
 
<div class="block"> 
 
    <label>Short</label> 
 
    <input type="text" /> 
 
</div>

JSFiddle

Fuente

2012-03-13 14:59:39 bfavaretto

¿Cómo hacer ¿Lo hago funcionar si algunas de las etiquetas son casillas de verificación o botones de opción? Las etiquetas de estos elementos terminan con el mismo ancho fijo que las etiquetas de la caja de texto que no se desean. ¿Hay alguna manera de hacer esto sin un ancho fijo en la etiqueta? –

@RebeccaMeritz ¿Quiere decir cuando el marcado tiene primero la casilla de verificación y luego la etiqueta? Podría agregar una clase a ambos y diseñarlos por separado. Quizás deberías [hacer una nueva pregunta] (http://stackoverflow.com/questions/ask) al respecto. – bfavaretto

que usar algo similar a esto:

<div class="form-element"> 
    <label for="foo">Long Label</label> 
    <input type="text" name="foo" id="foo" /> 
</div>

Estilo:

.form-element label { 
    display: inline-block; 
    width: 150px; 
}

Fuente

2012-03-13 15:01:03

respondido a una pregunta como esto antes, se puede echar un vistazo a los resultados aquí:

Creating form to have fields and text next to each other - what is the semantic way to do it?

Así que para aplicar las mismas reglas a su violín puede usar display:inline-block para mostrar la etiqueta y los grupos de entrada uno al lado del otro, de esta manera:

CSS

input { 
    margin-top: 5px; 
    margin-bottom: 5px; 
    display:inline-block; 
    *display: inline;  /* for IE7*/ 
    zoom:1;    /* for IE7*/ 
    vertical-align:middle; 
    margin-left:20px 
} 

label { 
    display:inline-block; 
    *display: inline;  /* for IE7*/ 
    zoom:1;    /* for IE7*/ 
    float: left; 
    padding-top: 5px; 
    text-align: right; 
    width: 140px; 
}

updated fiddle

Fuente

2012-03-13 15:11:34

También puede intentar usar flex-cuadro

<head><style> 
body { 
    color:white; 
    font-family:arial; 
    font-size:1.2em; 
} 
form { 
    margin:0 auto; 
    padding:20px; 
    background:#444; 
} 
.input-group { 
    margin-top:10px; 
    width:60%; 
    display:flex; 
    justify-content:space-between; 
    flex-wrap:wrap; 
} 
label, input { 
    flex-basis:100px; 
} 
</style></head> 
<body> 

<form> 
    <div class="wrapper"> 
     <div class="input-group"> 
      <label for="user_name">name:</label> 
      <input type="text" id="user_name"> 
     </div> 
     <div class="input-group"> 
      <label for="user_pass">Password:</label> 
      <input type="password" id="user_pass"> 
     </div> 
    </div> 
</form> 

</body> 
</html>

Fuente

2016-09-05 16:17:05 user6797117

Eso es bonito, pero no del todo lo que él pidió. Ver la imagen en op – Patrick

Mientras que las soluciones aquí son viables, la tecnología más reciente ha hecho por lo que creo que es una mejor solución. Diseño de cuadrícula CSS nos permite estructurar una solución más elegante.

El CSS a continuación proporciona una estructura de "configuraciones" de 2 columnas, donde se espera que la primera columna sea una etiqueta alineada a la derecha, seguida de algo de contenido en la segunda columna. El contenido más complicado se puede presentar en la segunda columna envolviéndolo en un <div>.

[Como nota lateral: utilizar CSS para añadir el ':' que las pistas de cada etiqueta, ya que este es un elemento estilístico - mi preferencia.]

/* CSS */ 
 

 
div.settings { 
 
    display:grid; 
 
    grid-template-columns: max-content max-content; 
 
    grid-gap:5px; 
 
} 
 
div.settings label  { text-align:right; } 
 
div.settings label:after { content: ":"; }

<!-- HTML --> 
 

 
<div class="settings"> 
 
    <label>Label #1</label> 
 
    <input type="text" /> 
 

 
    <label>Long Label #2</label> 
 
    <span>Display content</span> 
 

 
    <label>Label #3</label> 
 
    <input type="text" /> 
 
</div>

Fuente

2018-01-22 16:43:07

Oye, ¿puedes agregar un violín por favor? – sed

Sí, he actualizado la respuesta para hacer uso de fragmentos. –

Esto funciona en FF pero no en Chrome –

Alinear las etiquetas en el formulario junto a la entrada

Respuesta

Cuestiones relacionadas