入力フィールドを固定幅コンテナの残りのスペースに埋めるにはどうすればよいですか?-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: 表示するように設定された Span 要素内で入力フィールドをラップします。 block.
Positional Order: 入力フィールドの前に「ボタン」(または他の要素) を配置します。
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 サイトの他の関連記事を参照してください。