对齐一个表单和两个文本区域答案

【问题标题】：Align one form and two text areas对齐一个表单和两个文本区域
【发布时间】：2012-02-08 18:12:29
【问题描述】：

我有一个 FORM，其中包含一个 32*50 TEXTAREA 和一个提交按钮。

现在我想水平对齐两个包含附加信息的文本区域。理想情况下，三个文本区域（用户可以在其中键入/粘贴的区域和其他两个区域）应具有相同的宽度并出现在三个对齐的列中。

如果我想这样做，我应该只使用 HTML 吗？如果是这样，怎么做？一排三个 td 的表？（欢迎提供示例代码）。

或者您更愿意推荐 CSS？

【问题讨论】：

【解决方案1】：

由于textarea 是一个内联元素，您可以将这些元素一个接一个地放置。如果合适，它们将出现在一行中，但如果需要，它们将显示为两到三行。

如果您希望在水平空间不足时强制水平滚动，您可以使用单行表格。标记没有什么特别之处：

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

但如果您希望微调渲染，那么最好使用 CSS。

如果textarea 元素像往常一样需要标签，您可以将它们放在表格的另一行（在表格的开头）。

【讨论】：

【解决方案2】：

textarea 是内联元素，如果容器的宽度足够大，它们将水平对齐。所以，请参阅http://jsfiddle.net/FATfJ/ 我不知道这是否正是您需要的。

代码：

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

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

【讨论】：

【解决方案3】：

理想情况下，您需要一个很好的 CSS 和 HTML 组合。您也许可以使用字段集将您的字段放入其中，然后使用 CSS 将它们彼此相邻浮动。您可以使用 CSS 设置宽度和边距等，并且您应该能够以这种方式排列所有内容。

您可以使用表格来执行此操作，但我发现它们可以添加比实际需要更多的代码。

【讨论】：