BinaryDevelop
  1. ホーム
  2. html

[解決済み] HTMLの入力フォームを整列させる方法

2022-07-04 09:46:28

質問

私はHTMLの初心者で、フォームの使い方を学ぼうとしています。

今までのところ、私が抱えている最大の問題は、フォームの位置合わせです。以下は、私の現在の HTML ファイルの例です。 

<form>
 First Name:<input type="text" name="first"><br />
 Last Name:<input type="text" name="last"><br />
 Email:<input type="text" name="email"><br />
</form>

この問題は、'Email'の後のフィールドボックスが、ファーストネームやラストネームと比較して、間隔が大幅に異なることです。それらが本質的に「並ぶ」ようにするための「適切な」方法は何でしょうか？

私は良いフォームと構文を実践しようとしています...多くの人がCSSでこれを行うかもしれませんが、私はよくわかりません、私はこれまでHTMLの非常に基本的なことしか学んでいません。

どのように解決するのですか？

別の例では、これはCSSを使用しています。私は単にコンテナ・クラスのdivにフォームを配置しました。そして、その中に含まれる入力要素は、コンテナの幅の100%であり、両脇に要素を持たないように指定しました。 

.container {
  width: 500px;
  clear: both;
}

.container input {
  width: 100%;
  clear: both;
}

<html>

<head>
  <title>Example form</title>
</head>

<body>
  <div class="container">
    <form>
      <label>First Name</label>
      <input type="text" name="first"><br />
      <label>Last Name</label>
      <input type="text" name="last"><br />
      <label>Email</label>
      <input type="text" name="email"><br />
    </form>
  </div>
</body>

</html>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します