Lograr la ubicación horizontal de la etiqueta del formulario y la entrada en la misma línea

En el desarrollo web, la estética de los formularios es crucial para la experiencia del usuario. Organizar etiquetas y campos de entrada en la misma línea puede mejorar la legibilidad y usabilidad del formulario. Este artículo explora cómo alinear un elemento de entrada perfectamente con su etiqueta, independientemente de su longitud.

Intentos iniciales

Un enfoque común para alinear la etiqueta y la entrada en una sola La línea implica establecer el ancho de la entrada en automático. Sin embargo, esto a menudo da como resultado un ancho de entrada fijo. Alternativamente, usando ancho: 100%; mueve la entrada a una nueva línea, creando un diseño no deseado.

Solución: uso del elemento Span con desbordamiento oculto

Esta solución implica envolver el elemento de entrada dentro de un lapso, dando Tiene suficiente acolchado para mantener su posición debajo de la etiqueta. Posteriormente, ajustar la etiqueta para que flote hacia la izquierda la desplaza hacia la izquierda del intervalo. Establecer el desbordamiento del intervalo en oculto garantiza que su contenido se ajuste independientemente de su longitud, creando así la alineación deseada.

Ubicación óptima usando display: table-cell

Otro El enfoque utiliza display: table-cell para colocar la etiqueta y la entrada como celdas de la tabla. Esto requiere que el contenedor se muestre como una tabla y establezca el ancho de la etiqueta para mantener su posición mientras se ajusta el relleno de entrada para optimizar el espaciado.

Guía de implementación

Por primera vez solución, use código HTML como este:

Label

Y CSS:

label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}

Para la segunda solución:

HTML:

    Label
    

CSS:

.container {
    display: table;
    width: 100%
}
label {
    display: table-cell;
    width: 1px;
    white-space: nowrap
}
span {
    display: table-cell;
    padding: 0 0 0 5px
}
input {
    width: 100%
}

Al seguir estas soluciones, los desarrolladores pueden lograr la alineación horizontal deseada de la etiqueta y los elementos de entrada, mejorando el diseño del formulario y la experiencia del usuario.