如何格式化表格以使它们垂直对齐？

Question

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

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

Answer 1

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

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

label {display: block}

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

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

Answer 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