在表单中排列字段

Question

我无法整齐地排列表单中的所有字段。有什么建议吗？

我希望三个输入字段的外边缘彼此对齐，字段之间的垂直 space 与名称和电子邮件字段之间的 space 相同。 .. 谢谢您的帮助！ :)

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>

Answer 1

尝试属性显示：内联块；

Answer 2

编辑：根据评论...

您的原始代码有几个问题。首先，我不确定为什么将所有内容都包装在 <p> 标记中（也许这是来自 CMS 或其他东西？），但摆脱它和元素之间额外的 <br> 会给你带来更好的体验使用边距 and/or 填充等 css 属性精细控制它们之间的距离。

此外，您还有很多内联 styles/deprecated 代码，例如 valign 和 align。考虑将所有这些移动到您的外部 CSS 并清理它。

最后，在您的示例中对齐事物的一种简单方法是使用 table。不是每个人都同意使用 table 进行布局，除非您要对齐表格数据，但它很容易使用。

完成上述所有操作可能会产生类似于以下 jsFiddle 的内容： http://jsfiddle.net/ka43prwu/3/

在表单中排列字段

Lining up fields in a form

html

css

forms

alignment