對齊一個表單和兩個文本區域

我有一個包含32 * 50 TEXTAREA和提交按鈕的表單。對齊一個表單和兩個文本區域

現在我想水平對齊兩個包含附加信息的文本區域。理想情況下，三個文本區域（用戶可以輸入/粘貼的文本區域和另外兩個文本區域）應該具有相同的寬度，並顯示在三個對齊的列中。

如果我想這樣做，我應該只使用HTML？如果是這樣，怎麼樣？一行一行三td？（樣本代碼將是最受歡迎的）。

或者你寧願建議CSS？

2012-01-12 NoozNooz42

你可以粘貼你現在的代碼，或者也許是一個jsfiddle？ – Undefined 2012-01-12 13:01:42

這是你需要的嗎？ http://jsfiddle.net/FATfJ/ – itea 2012-01-12 13:06:56

@itea，爲什麼不發表你的評論作爲答案，但直接與代碼我的答案呢？ – systemovich 2012-01-12 13:13:24

textarea是內聯元素，如果容器的寬度足夠大，它們將水平對齊。所以，請參閱http://jsfiddle.net/FATfJ/我不知道這是否是您需要的。

代碼：

<form id="a-form"> 
    <textarea></textarea> 
    <textarea></textarea> 
    <textarea></textarea> 
</form> 

#a-form textarea {width: 100px;}

2012-01-12 13:17:21 itea

woaw。給所有人+1 ... jsfiddle似乎搖滾很多！是的，這似乎是我所追求的。能夠直接在jsfiddle中看到結果是非常好的！ – NoozNooz42 2012-01-12 16:47:40

理想情況下，您需要CSS和HTML的完美組合。你也許可以使用fieldset來放置你的字段，然後使用CSS將它們彼此相鄰放置。你可以使用CSS設置寬度和邊距等，你應該能夠以這種方式排列所有東西。

你可以使用表來做到這一點，但我發現他們可以添加比真正需要的更多的代碼。

2012-01-12 13:09:09 matpol

由於textarea是一個內聯元素，你可以把接連不斷這樣的元素。如果它們適合它們，它們將在一行中出現，但如果需要的話，則將它們包裹到兩行或三行。

如果您在橫向空間不足時強制水平滾動，則可以使用單行表。標記沒有什麼特別之處：

<table><tr><td><textarea ...></textarea> 
      <td><textarea ...></textarea> 
      <td><textarea ...></textarea> 
</table>

但是，如果您希望微調渲染，那麼最好用CSS來完成。

如果textarea元素需要標籤，就像通常那樣，您可以將它們放在表格的另一行中（在其開始處）。

2012-01-12 13:22:01

回答