【问题标题】：How do I format forms so they align vertically?如何格式化表单以使其垂直对齐？
【发布时间】：2014-01-23 02:54:20
【问题描述】：

我正在尝试创建一个表单供人们与我联系，但无法让它看起来不错。我无法让表单垂直对齐，也无法让消息标签显示在文本区域的左上角而不是左下角。

<form id="contact" name="contact" method="post">
<label for="name"><br>
  Name:</label>
<input type="text" name="name" id="name">
<label for="email"><br>
  Email:</label>
<input type="email" name="email" id="email">
<label for="subject"><br>
  Subject:</label>
<input type="text" name="subject" id="subject">
<label for="message"><br>
  Message:</label>
<textarea name="message" id="message"></textarea>
<input type="submit" name="submit" id="submit" value="Submit">
</form>

【问题讨论】：

请发布一个 jsFiddle 示例和您的样式表。另请注意，您的 HTML 无效（<input> 不能是 <form> 的直接子级）。
在Message标签后添加<br>，它将位于文本区域的左上角而不是底部
我还没有使用样式表，我不明白你为什么说 HTML 无效。
看看这个问题，答案是：stackoverflow.com/questions/15193848/…

标签： html css forms

【解决方案1】：

我不会使用<br>，但如果您愿意，请将其移到label 之外和input 之前。

或者，将您的标签设置为显示为块级项目：

label {display: block}

示例：http://jsbin.com/ixurUMU/1/

它无法按您希望的方式工作的原因是标签不是块级元素。它们是内联的。这意味着默认情况下它们不会以任何方式触发“换行符”。

【讨论】：

【解决方案2】：

HTML

<form id="contact" name="contact" method="post">
    <label for="name">
        Name:</label>
    <input class="textbox" type="text" name="name" id="name">
    <label for="email">
        Email:</label>
    <input class="textbox" type="email" name="email" id="email">
    <label for="subject">
        Subject:</label>
    <input class="textbox" type="text" name="subject" id="subject">
    <label for="message">
        Message:</label>
    <textarea class="textbox" name="message" id="message"></textarea>
    <input type="submit" name="submit" id="submit" value="Submit">

CSS

.textbox {display: block}

Working fiddle

你也可以用这个

HTML

<form id="contact" name="contact" method="post">
    <label class="label" for="name">
        Name:</label>
    <input class="textbox" type="text" name="name" id="name"><br>
    <label class="label" for="email">
        Email:</label>
    <input class="textbox" type="email" name="email" id="email"><br>
    <label class="label"  for="subject">
        Subject:</label>
    <input class="textbox" type="text" name="subject" id="subject"><br>
    <label class="label" for="message">
        Message:</label>
    <textarea class="textbox" name="message" id="message"></textarea><br>
      <label class="label" for="message">
        </label>  
    <input type="submit" name="submit" id="submit" value="Submit">

CSS

.textbox {display: inline-block;}
.label
{
    display: inline-block;
     width: 60px;
}

Fiddle Demo

【讨论】：