フォームとラベルの整列

Question

通常はスタイリングフォームは使用しませんが、現在登録フォームを作成していますが、画面の中央にフォーム要素を配置しようとしています。

を私は何かアドバイスは良いアドバイスですので、私はスタイリングにかなり新しいです言ったように：それは現在どのように見えるか

。

<form action="" method="POST"> 
 

 
    <label for="FirstName">First name:</label> 
 
    <input type="text" required name="FirstName" /> 
 
    <br> 
 

 
    <label for="SecondName">Second name:</label> 
 
    <input type="test" required name="SecondName" /> 
 
    <br> 
 
    <br> 
 

 
    <label for="Email">Email:</label> 
 
    <input type="text" required name="Email" /> 
 
    <br> 
 

 
    <label for="University">University:</label> 
 
    <input type="text" required name="University" /> 
 
    <br> 
 
    <br> 
 

 
    <label for="Username">Username:</label> 
 
    <input type="text" required name="Username" /> 
 
    <br> 
 

 
    <label for="Password">Password:</label> 
 
    <input type="password" required name="Password" /> 
 
    <br> 
 
    <br> 
 

 
    <input type="submit" name="register" value="register" /> 
 
    <br> 
 
    <br> 
 

 
</form>

Answer 1

私はあなたのためCodePenを作成しました。 要素間のギャップを作成するのに、余白またはパディングを使用するだけで<br>タグを使用しないでください。

http://codepen.io/anon/pen/KaEeWQ

form{ 
    width: 300px; (this fixes the width of the form you can change it to whatever you like) 
} 

label { 
    margin-bottom: 10px; (here you can change the gap between each element) 
} 

Answer 2

それはあなたが探しているものですか？

label { 
 
    width: 150px; 
 
    text-align:right; 
 
    display: inline-block; 
 
}

<form action="" method="POST"> 
 

 
<label for ="FirstName">First name:</label> 
 
<input type="text" required name="FirstName"/><br> 
 

 
<label for ="SecondName">Second name:</label> 
 
<input type="test"required name="SecondName"/><br><br> 
 

 
<label for ="Email">Email:</label> 
 
<input type="text" required name="Email"/><br> 
 

 
<label for ="University">University:</label> 
 
<input type="text" required name="University"/><br><br> 
 

 
<label for ="Username">Username:</label> 
 
<input type="text" required name="Username"/><br> 
 

 
<label for ="Password">Password:</label> 
 
<input type="password" required name="Password"/><br><br> 
 

 
<input type="submit" name="register" value="register"/><br><br> 
 

 
</form>