alinear el cuadro de texto y el texto/etiquetas en html?

Question

No puedo entenderlo. ¿Cómo alineo el cuadro de texto? Pensé en usar flotación: izquierda en las etiquetas de la izquierda (y luego hacerlo en la entrada cuando noto que la entrada estaba ahora a la izquierda sin eso) pero eso estaba completamente mal.

¿Cómo puedo alinear el cuadro de texto junto con las etiquetas a la izquierda de ellos junto al cuadro de texto en lugar de la extrema izquierda?

La imagen es un ejemplo de lo que me gustaría que fuera.

Answer 1

se puede hacer un diseño de varias div como esto

<div class="fieldcontainer"> 
    <div class="label"></div> 
    <div class="field"></div> 
</div> 

donde .fieldcontainer {clear: both; } .label {float: left; ancho: ___} .field {float: left; }

O, en realidad prefiero tablas para formularios como este. Esta es una gran cantidad de datos tabulares y sale muy limpio. Ambos funcionarán sin embargo.

Answer 2

Tiene dos casillas, izquierda y derecha, para cada par de etiquetas/entradas. Ambas cajas están en una fila y tienen ancho fijo. Ahora, sólo hay que hacer flotador texto de la etiqueta hacia la derecha con text-align: right;

Aquí hay un ejemplo simple:

http://jsfiddle.net/qP46X/

Answer 3

Usando una tabla sería uno (y fácil) opción.

Otras opciones están sobre la configuración de ancho fijo en el texto y lo que es alineados a la derecha:

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

o, como se señaló, hacer que todos flotan en lugar de en línea.

Answer 4

Me gusta establecer la 'altura de línea' en el CSS para que los divs se alineen correctamente. Aquí está un ejemplo de cómo lo hago con ASP y CSS:

ASP:

<div id="profileRow1"> 
    <div id="profileRow1Col1" class="righty"> 
     <asp:Label ID="lblCreatedDateLabel" runat="server" Text="Date Created:"></asp:Label><br /> 
     <asp:Label ID="lblLastLoginDateLabel" runat="server" Text="Last Login Date:"></asp:Label><br /> 
     <asp:Label ID="lblUserIdLabel" runat="server" Text="User ID:"></asp:Label><br /> 
     <asp:Label ID="lblUserNameLabel" runat="server" Text="Username:"></asp:Label><br /> 
     <asp:Label ID="lblFirstNameLabel" runat="server" Text="First Name:"></asp:Label><br /> 
     <asp:Label ID="lblLastNameLabel" runat="server" Text="Last Name:"></asp:Label><br /> 
    </div> 
    <div id="profileRow1Col2"> 
     <asp:Label ID="lblCreatedDate" runat="server" Text="00/00/00 00:00:00"></asp:Label><br /> 
     <asp:Label ID="lblLastLoginDate" runat="server" Text="00/00/00 00:00:00"></asp:Label><br /> 
     <asp:Label ID="lblUserId" runat="server" Text="UserId"></asp:Label><br /> 
     <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><br /> 
     <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox><br /> 
     <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox><br /> 
    </div> 
</div> 

Y aquí está el código en el archivo CSS para hacer que todos los campos anteriores se ven bien y ordenada:

#profileRow1{width:100%;line-height:40px;} 
#profileRow1Col1{float:left; width:25%; margin-right:20px;} 
#profileRow1Col2{float:left; width:25%;} 
.righty{text-align:right;} 

básicamente puede extraer todo excepto las etiquetas DIV y reemplazarlo con su propio contenido.

¡Créanme cuando digo que se ve alineado como lo hace la imagen en la publicación original!

Yo publicaría una captura de pantalla pero la pila no me deja: ¡Uy! No se pudo enviar su edición porque: Lo lamentamos, pero como mecanismo de prevención de correo no deseado, los usuarios nuevos no pueden publicar imágenes. Gane más de 10 reputaciones para publicar imágenes.

:)

Answer 5

he encontrado mejor opción,

<style type="text/css"> 
    .form { 
     margin: 0 auto; 
     width: 210px; 
    } 
    .form label{ 
     display: inline-block; 
     text-align: right; 
     float: left; 
    } 
    .form input{ 
     display: inline-block; 
     text-align: left; 
     float: right; 
    } 
</style> 

demo aquí: https://jsfiddle.net/durtpwvx/