テキストの先頭ではなく、互いに整列するサイズの入力ボックス

debugcn 投稿 Dev

TheLethalCoder

bodyタグ内にcssスタイルが適用された次のhtmlコードがあります。テキストボックスをすべて並べて、見栄えがよくなるようにします。ただし、見出しが上になるようにサイズを均等にすることしかできませんでしたが、インライン化してほしいのです。次のようなものです（ペイントスキルを失礼します。また、ボックスの線を細くするのを忘れました。これは、私が望んでいるものではありません）：

.FormContainer {
  width: 500px;
  clear: both;
}
.FormContainer input {
  width: 100%;
  clear: both;
}

<div class="FormContainer">
  <form id="LoginForm" name="LoginForm" method="post">
    <p>
      <label for="EmailAddressLoginField">Email Address:</label>
      <input type="text" name="EmailAddressLoginField" id="EmailAddressLoginField">
    </p>
    <p>
      <label for="PasswordLoginField">Password:</label>
      <input type="text" name="PasswordLoginField" id="PasswordLoginField">
    </p>
    <p>
      <input type="submit" name="LoginButton" id="LoginButton" value="Login">
    </p>
  </form>
</div>

これどうやってするの？

cssスタイリングがないと、次のようになります。これは私が望まないことです。

Connexo

最も柔軟な方法は、CSSテーブルを利用することです。提供されている他のソリューションに比べて、これはlabel（動的な世界では事前に知らないかもしれない）の幅を定義するように要求しません。

.FormContainer {
  width: 500px;
  clear: both;
}
.FormContainer input {
  width: 100%;
  clear: both;
}
.FormContainer form {
  display: table;
}
.FormContainer form p {
  display: table-row;
}
.FormContainer form p label,
.FormContainer form p input[type=text] {
  display: table-cell;
}
/* if the last paragraph in a form
always contains the submit button, add this: */

.FormContainer form p:last-child {
  display: block;
}

<div class="FormContainer">
  <form id="LoginForm" name="LoginForm" method="post">
    <p>
      <label for="EmailAddressLoginField">Email Address:</label>
      <input type="text" name="EmailAddressLoginField" id="EmailAddressLoginField">
    </p>
    <p>
      <label for="PasswordLoginField">Password:</label>
      <input type="text" name="PasswordLoginField" id="PasswordLoginField">
    </p>
    <p>
      <input type="submit" name="LoginButton" id="LoginButton" value="Login">
    </p>
  </form>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-07-27

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

テキストの先頭ではなく、互いに整列するサイズの入力ボックス

テキストの先頭ではなく、互いに整列するサイズの入力ボックス

先頭のスペースがテキストボックスに入力されないようにするにはどうすればよいですか？

入力グループの先頭にテキストのサイズが正しくありません

cssフォントサイズに関係なく、入力ボックスが互いに真下にある

入力後にTextBoxのキャレットがテキストの先頭にジャンプするのはなぜですか？

別のテキストボックスがレポートでサイズを大きくしたときに、テキストボックスのサイズを大きくしないようにする方法

テキスト サイズが大きくなる場合にテキスト ボックスのサイズ (高さ) を変更するにはどうすればよいですか?

jquerymobileでtextareaではなくテキスト入力のサイズを変更する方法

ファイルへの入力に基づいて行の先頭にテキストを追加する

フォームのテキストボックスのサイズを大きくするにはどうすればよいですか？

JavaScriptがここのテキストボックスに入力されないのはなぜですか？

入力テキストボックスのタイトルにない画像を（テキストボックスの）右側に配置する

入力テキスト ボックスを段落と同じサイズにする方法は?

フレックスボックスにテキスト入力フィールドが含まれている場合、フレックスボックスが広くなるのを防ぐにはどうすればよいですか？

テキストボックスがいっぱいになると、Jqueryは他の入力を表示します

誰かが入力テキストボックスなしであなたのウェブサイトに「タイプ」できるようにするにはどうすればよいですか？

テキスト入力ボックスの下部にテキストが表示されないようにする

入力ボックスのテキストを変更するにはどうすればよいですか？

ウェブサイトのテキストボックスにリクエストを入力する方法python

ファイルの先頭にテキストを挿入する方法は？

「従業員名を入力してください」と等しくないすべての入力ボックスがファイルに保存されるという「if」ステートメントを作成するにはどうすればよいですか？

近くの入力テキストボックスに値を表示する方法

スラッシュ付きのテキストを入力すると、インターネットブラウザがGoogle検索ではなく一部のWebサイトにリダイレクトするのはなぜですか？

数字だけがテキストボックスに入力されることを保証するだけでなく、空白のエントリも受け入れるキャッチを作成するにはどうすればよいですか？

ComboBoxのテキストボックスにdoubleしか入力できないようにするにはどうすればよいですか？

値を入力するときにテキストボックスの高さを拡大しないでください

入力を複数行のテキストの先頭に揃えるにはどうすればよいですか？

swiftを使用してWKWebViewのWebサイトのテキストボックスに事前入力する方法

JavaScriptで空の場合、多くのテキストボックスの中からテキストボックスに値を入力する

テキストがHTML入力ボックスの中央に配置されないようにするにはどうすればよいですか？

テキストサイズが大きくなる場合にテキストボックスのサイズ (高さ) を変更するにはどうすればよいですか?

入力テキストボックスを段落と同じサイズにする方法は?