입력 요소를 같은 줄의 레이블과 정렬하는 방법은 무엇입니까?

동일한 줄에 레이블이 있는 입력 요소 정렬

웹 디자인에서는 레이블과 해당 입력 필드를 오른쪽에 배치하는 것이 바람직한 경우가 많습니다. 컨테이너의 나머지 너비를 채우기 위해 입력 필드가 확장되는 동일한 줄입니다. 그러나 이는 "width: 100%;"와 같은 CSS 속성으로 인해 문제가 됩니다. 일반적으로 입력이 새 줄로 줄 바꿈됩니다.

이 문제를 극복하려면 두 가지 접근 방식이 있습니다.

접근 방식 1: 오버플로 숨김 및 부동

이 접근 방식에는 레이블을 왼쪽으로 플로팅하고 입력에 숨겨진 오버플로와 이를 감싸는 범위가 포함되도록 설정하는 작업이 포함됩니다. 레이블 너비를 고려하여 범위의 왼쪽에는 패딩이 0이고 오른쪽에는 6px가 있습니다.

<code class="html"><label for="test">Label</label>
<span><input name="test" id="test" type="text"></span></code>

<code class="css">label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}</code>

접근 방식 2: 테이블-셀 표시

또 다른 옵션은 "display: table-cell" 속성을 사용하는 것입니다. 컨테이너는 표와 같은 레이아웃을 생성하는 "display: table"로 설정되고, 레이블과 입력은 표 셀 안에 배치됩니다. 줄 바꿈을 방지하기 위해 레이블 너비는 1픽셀로 지정되고, 입력 공백은 왼쪽 패딩 5픽셀로 설정됩니다.

<code class="html"><div class="container">
    <label for="test">Label</label>
    <span><input name="test" id="test" type="text"></span>
</div></code>

<code class="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%
}</code>

두 방법 모두 크로스 브라우저에서 원하는 정렬을 효과적으로 달성합니다. 호환성. 개발자는 자신의 특정 요구 사항과 프로젝트 요구 사항에 가장 적합한 접근 방식을 선택할 수 있습니다.

위 내용은 입력 요소를 같은 줄의 레이블과 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!