<input タグで改行させない方法が知りたい

Question

提示画像ですがformのinputタグで改行が発生するためメールアドレスの横に入力欄を配置できません、どうやってinputタグの改行を無効にするのでしょうか？

    
    <div class="formInput">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>


    <div class="formInput">        
    <form action="login.php" method="post">
    
    <div>メールアドレス<input type="text" name="mail" ></div>
    <div>ID<input type="text" name="id"></div>
    <div>パスワード<input type="password" name="password"></div>
    <button type="submit" name="submit"> ログイン </button>
    </form>
    </div>

    <br><br><br><br><br>
    <div class="center">        
    <form action="signup.php" method="post">
    <button> 登録 </button>
    </form>
    </div>

    .formInput
    {
        
        
        font-size: 20px;
        display: grid;
        grid-template-columns: 200px 200px;
    }

Comments

[int32_t]

CSSを開示してください
PHPは関係ないので、コードから削除してください。

[m.ts10806]

なぜこうなっているのか理解すれば明白なのでは

Answer 1

<div>メールアドレス<input type="text" name="mail" ></div> がカラムの幅 200px に収まらないので折返しが発生しているのでしょう。

前の質問から察すると 「メールアドレス」と <input> はそれぞれ別のグリッドアイテムにしたいのでは。そうであるなら、これらは親子ではなく兄弟関係であるべきです。

<div>メールアドレス</div>
<input type="text" name="mail" >

Comments

[退会済みユーザー]

/* 入力フォーム */
.formInput
{
display: grid;
justify-items: center;
align-items: center;

font-size: 20px;
grid-template-columns: 500px 500px;
}
上記のようにしたのですが端が揃ってくれませんこれはなぜでしょうか？

[int32_t]

私の回答に grid-template-columns を増やせなんて書いてないですよね。

見落としてましたが、class="formInput" はグリッドアイテムの親に付ける必要があるので、<form> に付けます。