컨테이너의 남은 너비를 입력 요소로 채우는 방법은 무엇입니까?

입력 요소로 남은 컨테이너 너비 채우기

입력 레이블과 텍스트 필드가 고정 너비 컨테이너 내에서 한 줄을 공유하는 경우 스타일링 나머지 너비를 최적으로 채우는 입력 필드는 어려울 수 있습니다. 다음은 신뢰할 수 없는 JavaScript 또는 테이블 레이아웃 트릭에 의존하지 않는 다용도 솔루션입니다.

해결책:

1. 입력 필드 래핑: 디스플레이가 포함된 범위의 입력 필드: block.
2. 위치 반전: 입력 필드 앞에 버튼 요소를 배치합니다.
3. 버튼 플로트: 버튼 요소 오른쪽에 플로트 추가: .
4. 남은 공간 채우기: 범위에 포함된 입력 필드는 자동으로 남은 공간을 차지합니다.

예:

form {
    width: 500px;
    overflow: hidden;
    background-color: yellow;
}
input {
    width: 100%;
}
span {
    display: block;
    overflow: hidden;
    padding-right:10px;
}
button {
    float: right;
}

<form method="post">
    <button>Search</button>
    <span><input type="text" title="Search" /></span>
</form>

이 접근 방식을 사용하면 입력 필드가 공간을 알지 못하더라도 나머지 컨테이너 너비를 채울 수 있습니다. 라벨 크기. 간단하고 깔끔하며 다양한 브라우저와 호환됩니다.

위 내용은 컨테이너의 남은 너비를 입력 요소로 채우는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!