窗体和标签对齐

我通常不会使用样式表单，但我目前正在创建一个注册表单，而且我试图将所有关闭文本框的屏幕中间的表单元素对齐。窗体和标签对齐

目前它的外观：

就像我说我是相当新的造型，因此任何建议是很好的建议。

<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

窗体和标签对齐

回答

相关问题