窗體和標籤對齊

我通常不會使用樣式表單，但我目前正在創建一個註冊表單，而且我試圖將所有關閉文本框的屏幕中間的表單元素對齊。窗體和標籤對齊

目前它的外觀：

就像我說我是相當新的造型，因此任何建議是很好的建議。

<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>

來源

2017-02-15 Brad

請添加CSS爲好。 – insertusernamehere

您可以包含相關的CSS - 請參閱[如何創建最小，完整和可驗證示例]（http://stackoverflow.com/help/mcve） – Nope

您應該[學習如何正確使用標籤元素]（http ：//www.456bereastreet.com/archive/200711/use_the_label_element_to_make_your_html_forms_accessible/）。如果沒有for屬性或者表單控件，標籤就沒用了。 – Quentin

我創建了一個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) 
}

來源

2017-02-15 16:25:59 d3orn

我已經改變了我的html頁面和css頁面來匹配，但現在表單元素只是在一條長長的行中，而不是在彼此之下。 – Brad

您需要查看CodePen鏈接瞭解更多詳情。我也改變了你一點HTML或自己提供一個CodePen或類似的鏈接，所以我們可以看到你的立場在 – d3orn

固定它，謝謝。 – Brad

是不是你在找什麼？

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>

來源

2017-02-15 16:18:35

窗體和標籤對齊

回答

相關問題