웹 양식에서 레이블과 입력 필드를 수평으로 정렬하는 방법은 무엇입니까?

레이블 및 입력 요소를 수평으로 정렬

웹 양식의 미적 특성을 향상하려면 레이블과 입력 필드를 서로 나란히 배치하는 기능이 필요합니다. 이 가이드에서는 CSS를 사용하여 수평 정렬을 달성하는 방법을 설명합니다.

문제:

초기 게시물에서 강조한 것처럼 두 가지 주요 과제가 있습니다.

• 레이블과 입력 요소가 같은 줄을 차지하도록 합니다.
• 레이블 길이에 관계없이 입력 필드의 너비를 확장하여 남은 공간을 채웁니다.

해결책 1: 인라인 블록

디스플레이 사용: 라벨 요소와 입력 요소 모두에 인라인 블록을 사용하면 개별 크기를 유지하면서 가로로 정렬할 수 있습니다. 그러나 이는 입력 필드의 나머지 너비를 채우는 요구 사항을 충족하지 못할 수 있습니다.

향상된 솔루션: float/overflow Magic

• 용 컨테이너 만들기 라벨과 입력 요소 모두.
• 입력이 나머지 공간을 차지할 수 있도록 라벨을 왼쪽으로 띄웁니다.
• 이중 행 동작을 방지하려면 라벨 컨테이너의 오버플로를 숨깁니다.
• 입력 요소의 너비를 100%로 설정합니다.

**CSS:

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

해결책 2: table-cell

또 다른 효과적인 접근 방식은 두 요소를 모두 테이블 셀로 처리하는 것입니다.

• 래퍼 컨테이너를 생성하고 표시 속성을 테이블로 설정합니다.
• 레이블을 표시로 지정: table-cell 오버플로를 방지하기 위해 너비: 1px 및 공백: nowrap을 사용합니다.
• 입력 필드를 디스플레이: 테이블 셀 및 너비: 100%로 설정합니다.

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

위 내용은 웹 양식에서 레이블과 입력 필드를 수평으로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!