HTML에서 입력 요소와 레이블을 같은 줄에 정렬하는 방법은 무엇입니까?

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

HTML에서는 레이블과 입력 요소를 동일한 가로선에 배치하는 것이 바람직한 경우가 많습니다. 그러나 남은 공간을 채울 입력 요소의 이상적인 너비를 결정하는 것은 어려울 수 있습니다.

문제:

width: auto;를 사용하는 표준 접근 방식, 결과 입력 요소의 정적 너비입니다. 또는 너비: 100%; 입력을 새 줄로 이동합니다.

해결책:

원하는 정렬을 얻으려면 다음 CSS 기술을 고려하십시오.

옵션 1: 부동 레이블 및 오버플로

HTML:

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

CSS:

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

이 방법은 오버플로를 활용합니다. 속성을 사용하면 줄바꿈을 방지하여 입력 요소를 레이블과 정렬할 수 있습니다.

옵션 2: 테이블 표시

HTML:

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

CSS:

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

이 접근 방식은 display: table 속성을 활용하여 테이블과 같은 레이아웃을 생성합니다. 여기서 레이블은 고정된 너비를 갖고 입력 요소는 나머지 공간을 채우기 위해 확장됩니다.

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