入力フィールドを固定幅コンテナの残りのスペースに埋めるにはどうすればよいですか?

固定幅コンテナ内の入力要素の流体幅を実現する

質問:

方法入力フィールドを、テキストなしで固定幅コンテナ内の残りの利用可能なスペースを占めるようにスタイル設定できますかラッピングやラベル サイズを事前に決定する必要がありますか?

答え:

この効果を実現するには、次の点を考慮してください:

1. Wrapper Span: 表示するように設定された Span 要素内で入力フィールドをラップします。 block.
2. Positional Order: 入力フィールドの前に「ボタン」(または他の要素) を配置します。
3. Floating: 「ボタン」をフロートします" (または他の要素) を右側に追加すると、入力フィールドが残りのフィールドを埋めることができます。 space.

コード例:

<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 中国語 Web サイトの他の関連記事を参照してください。