Esta es una de esas cosas que puede ser sorprendentemente difícil de hacer bien.

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

Mi preferencia es usar el 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 poder especificar dimensiones).

Entonces, la respuesta es simplemente hacer que ambos display:inline-block; y asigne a las indicaciones 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 interrupción después del campo de entrada; de lo contrario, aparecerá el siguiente mensaje en la misma línea, que no es el efecto deseado. La mejor manera de lograr esto es colocar cada solicitud y su campo en un contenedor <div> .

Entonces su 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 tu 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 usar este complemento para configurar 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); }

de esta página en un comentario

y lo usas de esta manera:

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

y eso es todo... todas sus etiquetas van a tomar el ancho de la etiqueta más larga

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

Coloque cada etiqueta con su entrada correspondiente en la etiqueta ap. Luego 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>