입력 요소가 컨테이너의 나머지 너비를 채우도록 만드는 방법은 무엇입니까?

컨테이너의 나머지 너비에 맞게 입력 요소의 스타일을 지정하는 방법

고정 요소 내에서 레이블 옆에 입력 요소가 있는 상황이 자주 발생할 수 있습니다. 너비 컨테이너. 목표는 입력 필드의 너비를 동적으로 조정하여 줄 바꿈을 유발하지 않고 남은 공간을 채우는 것입니다.

CSS 솔루션

<br>form {</p>
<pre class="brush:php;toolbar:false">width: 500px;
overflow: hidden;
background-color: yellow;

}
입력 {

width: 100%;

}
스팬 {

display: block;
overflow: hidden;
padding-right:10px;

}
버튼 {

float: right;

}

<사전>
<양식 method="post">

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

이 솔루션은 몇 가지 핵심 기술을 사용합니다.

• 입력 요소는 디스플레이가 있는 span 내에 래핑됩니다. block 속성을 ​​사용하여 블록 수준 요소처럼 동작하도록 설정합니다.
• 스팬에는 과도한 입력 오버플로가 표시되지 않도록 overflow:hidden 속성도 있습니다.
• 버튼이 오른쪽으로 떠서 맨 오른쪽에 위치하게 됩니다.
• 입력 요소의 너비는 100%로 설정되어 양식 내의 나머지 너비를 효과적으로 채웁니다.

이 접근 방식은 간단한 라벨의 길이에 관계없이 나머지 너비에 맞게 입력 요소의 크기를 동적으로 조정하는 효과적인 방법입니다.

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