CSS para alinear la etiqueta y la entrada

Question

Fragmento de código HTML:

<fieldset id="o-bs-sum-buginfo"> 
    <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label> 
    <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" /> 

    <label for="o-bs-sum-bug-ErrorNumber">Error Number</label> 
    <input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" /> 
    .... 
</fieldset> 

Usando sólo CSS (o jQuery), independientemente del tamaño del navegador, Quiero par de marcadores y elementos de entrada junto a la otra. También tengo libertad para cambiar el HTML. si es requerido.

Answer 1

Ésta es una de esas cosas que pueden ser sorprendentemente difícil de hacerlo bien.

Muchas personas sugerirán usar float:left; para esto. Personalmente, realmente no me gustan las carrozas; parecen causar más problemas de los que resuelven.

Mi preferencia es usar bloque en línea. Este es un método de visualización que combina propiedades en línea (para que pueda alinear fácilmente elementos uno al lado del otro, etc.) con propiedades de bloque (como la posibilidad de especificar dimensiones).

Así que la respuesta es simplemente hacer que ambos sean display:inline-block; y darles a las solicitudes un ancho fijo, lo que hará que los campos de entrada junto a ellos se alineen.

También necesitará algún tipo de avance de línea o corte después del campo de entrada, de lo contrario, el próximo aviso aparecerá en la misma línea, que no es el efecto deseado. La mejor forma de lograr esto es colocar cada mensaje y su campo en un contenedor <div>.

Así el código HTML se verá así:

<fieldset id="o-bs-sum-buginfo" class="myfields"> 
    <div> 
    <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label> 
    <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" /> 
    </div> 

    <div> 
    <label for="o-bs-sum-bug-ErrorNumber">Error Number</label> 
    <input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" /> 
    </div> 
    .... 
</fieldset> 

y el CSS se verá así:

.myfields label, .myfields input { 
    display:inline-block; 
} 

.myfields label { 
    width:200px; /* or whatever size you want them */ 
} 

Espero que ayude.

Editar: puede utilizar este plugin para establecer el ancho de cada etiqueta:

jQuery.fn.autoWidth = function(options) 
{ 
    var settings = { 
     limitWidth : false 
    } 

    if(options) { 
     jQuery.extend(settings, options); 
    }; 

    var maxWidth = 0; 

    this.each(function(){ 
     if ($(this).width() > maxWidth){ 
      if(settings.limitWidth && maxWidth >= settings.limitWidth) { 
      maxWidth = settings.limitWidth; 
      } else { 
      maxWidth = $(this).width(); 
      } 
     } 
    }); 

    this.width(maxWidth); 
} 

from this page in a comment

y usarlo de esta manera:

$("div.myfields div label").autoWidth(); 

y eso todas ... todas sus etiquetas tomarán el ancho de la etiqueta más larga

Answer 2

#o-bs-sum-buginfo label, #o-bs-sum-buginfo input{display:inline-block;width:50%;}

Answer 3

Ponga cada etiqueta con su entrada correspondiente en una etiqueta p. A continuación, agregue el siguiente css:

label{ 
    float:left; 
    width:100px; //whatever width that suits your needs 
} 

p{ 
    margin:10px 0; //manipulate the vertical spaces for each input.. 
} 



<fieldset id="o-bs-sum-buginfo"> 
    <p> 
    <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label> 
    <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" /> 
    </p> 
</fieldset> 

Answer 4

Creo que usar javascript para un simple truco de CSS es exagerado. Aquí es el que hice hace un momento: http://jsfiddle.net/t6R93/

div{ 
    display: table-row; 
} 
label,input{ 
    display:table-cell; 
} 

PD: Puede tener defectos con otros navegadores. Solo probé con Chrome.

Answer 5

Tenía curiosidad por ver si esto se podía hacer con el marcado semántico "natural", es decirsin elementos de envoltura no semánticas y con la label que contiene su correspondiente input lugar de tener que referirse a ella con la ligeramente torpe for atributo:

<fieldset> 
    <label>Error Prefix<input/></label> 
    <label>Error Number<input/></label> 
</fieldset> 

Una etiqueta de ancho fijo no se alineará las entradas aquí porque el texto no es un elemento separado, y la solución elegante mínima de Shahid no funciona bien, pero si usted está dispuesto a hacer todas las entradas de la misma anchura (que en mi humilde opinión se ve bien en cualquier caso) puede float ellos right:

label { display:block; margin:8px; width:360px; clear:right; overflow:auto; } 
input, button, textarea, select { box-sizing:border-box; -moz-box-sizing:border-box; width:200px; float:right; } 

El -moz-box-sizing debe ser redundante cuando se libera FF29, e incluso el box-sizing no es necesario a menos que esté mezclando tipos de control de formulario. El clear y overflow son específicamente necesarios para textarea.

completo ejemplo de tipo de entrada mixta:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Aligned labels</title> 
    <style> 
     label { display:block; margin:8px; width:360px; clear:right; overflow:auto; } 
     input, button, textarea, select { box-sizing:border-box; -moz-box-sizing:border-box; width:200px; float:right; } 
    </style> 
    </head> 
    <body> 
    <label>Name<input type="text" value="Sir Galahad of Camelot"/></label> 
    <label>Quest<textarea>I seek the Holy Grail</textarea></label> 
    <label>Favourite Colour<select><option>Blue</option><option>Yellow</option></select></label> 
    <label>If you're sure...<button>Give Answers</button></label> 
    </body> 
</html> 

Answer 6

No hay necesidad de utilizar JavaScript, jQuery, o div s adicionales. Sólo tienes que:

• flotador tanto input y label a la izquierda (tenga en cuenta que tiene que ser input bloque a flotaron).
• Agregar clear: both a label.
• Establecer ancho fijo (por ejemplo, 100px) a label.

input { 
 
    display: block; 
 
    float: left; 
 
} 
 
label { 
 
    float: left; 
 
    clear: both; 
 
    width: 100px; 
 
}

<fieldset id="o-bs-sum-buginfo"> 
 
    <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label> 
 
    <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" /> 
 

 
    <label for="o-bs-sum-bug-ErrorNumber">Error Number</label> 
 
    <input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" /> 
 
</fieldset>