入力要素がコンテナの残りの幅を埋めるようにするにはどうすればよいですか?

コンテナの残りの幅に合わせて入力要素をスタイル設定する方法

固定テキスト内のラベルの横に入力要素がある状況によく遭遇することがあります。幅のコンテナ。目的は、改行を発生させずに入力フィールドの幅を動的に調整して残りのスペースを埋めることです。

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;

}

<br><form method="post"></p>
<pre class="brush:php;toolbar:false"> <button>Search</button>
 <span><input type="text" title="Search" /></span>

< ;/pre>

このソリューションでは、いくつかの重要な手法を採用しています。

• 入力要素は、display: blockspan 内にラップされます。 > プロパティを使用して、ブロック レベルの要素のように動作するように設定します。
スパンには、過剰な入力オーバーフローが表示されないようにするための
• overflow: hidden プロパティもあります。
• ボタンは右にフローティングされ、コンテナの右端に配置されます。
入力要素の幅は100%
• 、フォーム内の残りの幅を効果的に埋めます。
このアプローチは、ラベルの長さに関係なく、残りの幅に合わせて入力要素のサイズを動的に変更する簡単で効果的な方法を提供します。 .

以上が入力要素がコンテナの残りの幅を埋めるようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。