爲標籤和文本字段設計一個具有預定義寬度的好窗體

Question

我想爲我的網頁設計一個漂亮的窗體，我想要像這樣的東西。

---

基本上，我想的是，描述的輸入字段中的文本以及輸入字段具有一些預定義的寬度。我沒有使用我的表格的表格佈局，而是使用標籤作爲的方法。

會發生什麼情況是這樣的

---

我可以爲文本字段設置的大小，因爲我已經做了。我不知道如何處理設置文字或標籤的寬度。在HTML是這樣的：

<form class="myform" method="POST" action="./php/prescribe.php"> 
     <label for="fname">First Name :</label> 
     <input type="password" name="fname" size="35"><br> 

     <label for="fname">Give your email address :</label> 
     <input type="password" name="lname" size="35"><br> 

     <label for="fname">First Name :</label> 
     <input type="password" name="fname" size="35"><br> 

     <label for="fname">First Name :</label> 
     <input type="password" name="fname" size="35"><br> 
</form> 

Answer 1

你可以浮動標籤：

.myform label { 
    float: left; 
    clear: both; 
    width: 12em; /* or whatever */ 
} 

花車可有點惱怒，因爲舊版本的IE有時做愚蠢的事情。

或者你可以使用display: inline-block，這是我比較喜歡：

.myform label { 
    display: inline-block; 
    width: 12em; /* or whatever */ 
} 

就這樣，你需要添加的輸入，有些人可能認爲不愉快之間<br>元素。

另一種方法是將<dl>塊用於整個事情，但這並不能改變基本問題。

Answer 2

使用CSS。此外，你會想在每一行使用一個包裝。這是一個快速而骯髒的例子。

CSS：

.form-row{} 
.form-row-alt {} /* add alternating color here */ 
.form-row label, .form-row-alt label { display: inline-block; width: 150px; } 

HTML：

<div class="form-row"> 
    <label>First Name:</label> 
    <input type="text" name="username" /> 
</div>