양식 레이블의 수평 배치 및 동일한 행에 입력 달성

웹 개발에서 양식의 미학은 사용자 경험에 매우 중요합니다. 레이블과 입력 필드를 같은 줄에 배열하면 양식의 가독성과 유용성을 향상시킬 수 있습니다. 이 문서에서는 길이에 관계없이 입력 요소를 해당 레이블과 원활하게 정렬하는 방법을 살펴봅니다.

초기 시도

단일 요소에서 레이블과 입력을 정렬하는 일반적인 접근 방식 라인에는 입력 너비를 자동으로 설정하는 작업이 포함됩니다. 그러나 이로 인해 입력 너비가 고정되는 경우가 많습니다. 또는 width: 100%; 입력을 줄 바꿈으로 이동하여 원하지 않는 레이아웃을 만듭니다.

해결책: 숨겨진 오버플로와 함께 범위 요소 사용

이 해결 방법에는 범위 내에서 입력 요소를 래핑하는 작업이 포함됩니다. 라벨 아래 위치를 유지하기에 충분한 패딩입니다. 그런 다음 레이블을 왼쪽 부동으로 조정하면 레이블이 범위의 왼쪽으로 이동합니다. 범위의 오버플로를 숨김으로 설정하면 내용이 길이에 관계없이 맞춰지므로 원하는 정렬이 생성됩니다.

디스플레이를 사용한 최적의 배치: table-cell

또 다른 접근 방식은 display: table-cell을 활용하여 레이블을 배치하고 테이블 셀로 입력합니다. 이를 위해서는 컨테이너가 테이블로 표시되어야 하며 레이블의 너비를 설정하여 위치를 유지하는 동시에 간격을 최적화하기 위해 입력 패딩을 조정합니다.

구현 지침

처음 해결 방법은 다음과 같은 HTML 코드를 사용하세요.

Label

그리고 CSS:

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

두 번째 해결 방법:

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%
}

이러한 솔루션을 따르면 개발자는 레이블과 입력 요소의 원하는 수평 정렬을 달성하여 양식 디자인과 사용자 경험을 향상시킬 수 있습니다.