CSS의 동적 너비를 사용하여 레이블과 입력을 가로로 정렬하는 방법은 무엇입니까?

동적 너비를 사용하여 라벨 및 입력을 가로로 정렬

웹 디자인에서는 라벨과 해당 입력 요소를 동일한 위치에 배치해야 하는 경우가 많습니다. 선. 그러나 레이블의 텍스트에 관계없이 입력 요소가 나머지 너비를 채우도록 보장하는 것은 어려울 수 있습니다.

CSS를 사용하여 이를 달성하려면 다음 기술을 고려하십시오.

오버플로 숨기기 기술

1. HTML: 레이블 및 범위 요소를 사용하여 입력을 래핑합니다.

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

2. CSS: 범위에 Overflow: Hidden 속성을 사용합니다.

<code class="css">label {
    float: left; /* Align label to the left */
}
span {
    display: block;
    overflow: hidden; /* Key trick for adjusting input width */
    padding: 0 4px 0 6px; /* Add padding for visual consistency */
}
input {
    width: 100%;
}</code>

테이블 셀 표시 기술

1. HTML: 컨테이너 div 내에 레이블과 입력을 묶습니다.

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

2. CSS: 테이블 표시 및 테이블 셀 속성 활용:

<code class="css">.container {
    display: table;
    width: 100%;
}
label {
    display: table-cell;
    width: 1px; /* Minimal width to accommodate label */
    white-space: nowrap;
}
span {
    display: table-cell;
    padding: 0 0 0 5px;
}
input {
    width: 100%;
}</code>

이러한 기술은 레이블 텍스트의 길이에 맞춰 입력 요소가 나머지 너비를 채우도록 하면서 레이블과 입력을 효과적으로 수평으로 정렬합니다.

위 내용은 CSS의 동적 너비를 사용하여 레이블과 입력을 가로로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!