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

Question

我有一张包含32 * 50 TEXTAREA和提交按钮的表格。

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

如果我想这样做，我应该只使用HTML吗？如果是这样，怎么样？有一行和三个td的表？ （样本代码最受欢迎）。

或者您更愿意推荐CSS？

Answer 1

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

代码：

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

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

Answer 2

由于textarea是内联元素，因此您可以将这些元素放在另一个元素之后。如果它们适合它们，它们将出现在一行中，但如果需要，它们将包裹成两行或三行。

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

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

但是如果你想微调渲染，那么最好用CSS完成。

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

Answer 3

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

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