如何将textarea字段与html表单中的文本框字段宽度对齐？

Question

我正在设计一个网页表单,其中包含几个文本框和textarea字段,并注意到这些字段存在某些对齐问题.

代码如下 -

<textarea rows="4" cols="30" name="details"></textarea>
<input type="text" name="username" size="30"></input>

虽然两个字段的col宽度都设置为30,但我看到textarea宽度超出了文本框的宽度.我使用overflow:隐藏使用css作为textarea字段,然后尝试使用cols属性设置为25,26等来调整大小,但仍然看到对齐不完美(虽然非常接近).

问题 - 是否有更好的方法将表格中的所有字段对齐,使标准宽度为30cols？

Answer 1

使用CSS来设置元素样式是通常的方法:

<textarea style="width:400px;" rows="4" cols="30" name="details"></textarea><br/>
<input  style="width:400px;" type="text" name="username" size="30"/>

我只使用内联样式作为示例,你想要分配类,使用样式表等.另外,我修复了文本输入元素的拼写错误,因为它是一个自我结束标记.

祝好运!