我无法整齐地排列表单中的所有字段。有什么建议吗?
我希望三个输入字段的外边缘彼此对齐,并且字段之间的垂直间距与名称和电子邮件字段之间的间距相同...感谢您的帮助! :)
form {
background-color: #3d549a;
}
input {
border: none;
width: 400px;
padding: 15px;
border-radius: 5px
}
textarea {
height: 10em;
resize: vertical;
font-family: avenir;
font-size: 17px;
color: #fff;
font-weight: 100;
border: none;
width: 860px;
padding: 15px;
border-radius: 5px
}
.buttonblue {
padding-left: 90px;
background-color: #31b9e9;
font-family: avenir;
font-size: 16px;
width: 300px;
height: 75px;
color: #fff;
padding: 0;
border: none;
border-radius: 5px;
box-shadow: 0 5px 1px #21a1c6
}
<table width="100%" style="background-color: #3d549a" height="820px">
<tr height="250">
<td valign="bottom" align="center" width="100%" colspan="4">
<span style="font-family: avenir; font-size: 40px; color: #ffffff; font-weight: 500; line-height: 10px;">GET IN TOUCH<span/>
<hr color="#273a72" width="75" align="centre">
<span style="font-family: avenir; font-size: 15px; color: #ffffff; font-weight: 100; line-height: 10px;">1600 Pennslyvania Ave NW, Washington, DC 20500, United States of America. Tel: (202) 456-1111</span>
</td>
</tr>
<tr>
<td <td width="100%" align="center">
<form class="form" action="/my-handling-form-page" method="post">
<p>
<input class="required" type="text" id="name" placeholder="Your Name" style="font-family: avenir; font-weight:100; font-size: 17px; background-color: #273a72;" />
<input class="required" type="email" id="mail" placeholder="Your Email" style="font-family: avenir; font-weight:100; font-size: 17px; background-color: #273a72;" />
</p>
<p>
</br>
<textarea class="required" id="msg" placeholder="Your Message" style="font-family: avenir; color: #fff; font-weight:100; font-size: 17px; background-color: #273a72"></textarea>
</p>
<p>
</br>
</br>
<button class="buttonblue" type="submit">SEND MESSAGE</button>
</br>
</br>
</br>
</br>
</p>
</form>
</td>
</tr>
</table>
最佳答案
编辑:基于评论...
您的原始代码有几个问题。首先,我不确定您为什么将所有内容都包装在 <p>
中标签(也许这是来自 CMS 或其他东西?),但要摆脱它和额外的 <br>
between elements 会让你更好地控制它们之间的距离,使用 margin 和/或 padding 等 css 属性。
此外,您还有很多内联样式/弃用代码,例如 valign
和 align
.考虑将所有这些移动到您的外部 CSS 并清理它。
最后,在您的示例中对齐内容的一种简单方法是使用表格。除非您要对齐表格数据,否则并不是每个人都同意使用表格进行布局,但它很容易使用。
执行上述所有操作可能会产生类似于以下 jsFiddle 的内容: http://jsfiddle.net/ka43prwu/3/
关于html - 在表单中排列字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29302445/