如何格式化表單以便垂直對齊？

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