고정 너비 컨테이너의 남은 공간을 입력 필드로 채우는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

고정 너비 컨테이너의 남은 공간을 입력 필드로 채우는 방법은 무엇입니까?

Patricia Arquette

풀어 주다： 2024-11-15 11:18:03

원래의

394명이 탐색했습니다.

How to Make an Input Field Fill Remaining Space in a Fixed-Width Container?

고정 너비 컨테이너 내 입력 요소의 유동 폭 달성

질문:

어떻게 텍스트 줄 바꿈이나 라벨 크기를 미리 결정할 필요 없이 고정 너비 컨테이너 내에서 사용 가능한 나머지 공간을 차지하도록 입력 필드의 스타일을 지정할 수 있습니까?

답변:

이 효과를 얻으려면 다음을 고려하세요.

Wrapper Span: 표시로 설정된 범위 요소 내에서 입력 필드를 래핑합니다: block.
위치 순서: 입력 필드 앞에 "버튼"(또는 기타 요소)을 배치합니다.
플로팅: "버튼"(또는 기타 요소)을 오른쪽에 플로팅합니다. 입력 필드가 남은 공간을 채우도록 허용합니다.

예제 코드:

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

로그인 후 복사

form {
  width: 500px;
  overflow: hidden;
  background-color: yellow;
}

input {
  width: 100%;
}

span {
  display: block;
  overflow: hidden;
  padding-right: 10px;
}

button {
  float: right;
}

로그인 후 복사

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