對齊HTML表單字段 - 轉換爲CSS

Question

我已經開始設計一個表單，而且我已經完成了這個明顯的方式（對我來說），但是這看起來確實是錯誤的方式。我不認爲我應該使用表格，而是CSS：

<form action="test.php"> 
    <table> 
     <tr> 
      <td>Name</td><td><input type="text" id="prjname" size="30"/></td> 
      <td align="right">Design type</td><td align="right"><select id="prjdesigntype"> 
       <option value="0" selected="selected">- Select one -</option> 
       </select></td> 
     </tr> 
     <tr> 
      <td>Description</td><td colspan="3"><input type="text" size="80" id="prjdesc" /></td> 
     </tr> 
    </table> 
</form> 

任何人都可以建議一個更好的方法或執行上述操作嗎？具體來說，我希望它看起來不錯，例如「選擇」框與上面描述框的結尾對齊。

我試過使用DIV，但我無法弄清楚如何將文本框與上一行上的文本框在一行上對齊。

Answer 1

也許你會很好地開始使用div和css，因爲那樣你就可以更好地控制你的元素。試試這個代碼。

<div style="width: 500px; height: auto; margin: auto;"> 
<form> 
<input type="text" name="prjname" id="prjname" size="30" placeholder="Enter your name .." style="float:left; clear:none; padding-left: 15px;"/> 
<select id="prjdesigntype"style="float: right; clear:none;" > 
    <option value="0" selected="selected">- Select one -</option> 
</select> 
<input type="text" size="80" id="prjdesc" placeholder="Enter the description .." style="float:left; clear:both; width: 500px; padding-left: 15px;"/> 

</form> 
</div> 

Answer 2

給這個一去

<form action="test.php"> 

    <div style="margin-bottom:5px;"> 
     <div style="float:right;"> 
      Design type 
      <select id="prjdesigntype"> 
       <option value="0" selected="selected"> 
        - Select one option 
       </option> 
      </select> 
     </div> 
     <div> 
      Name 
      <input type="text" id="prjname" size="30"/> 
     </div> 
    </div> 

    <div> 
     Description <input type="text" size="60" id="prjdesc" /> 
    </div> 

</form> 

一旦你得到你的頭周圍，divs和CSS比表:)

而且，這可能屬於更上http://ux.stackexchange.com容易得多，但它往往更好的可用性是將所有表單元素放在一列而不是兩列，所以你可能希望這樣做。

Answer 3

它更好地使用textarea標籤來描述，因爲輸入標籤不適合長文本，它不會看起來不錯。