HTML和CSS表格没有排队

Question

我正在尝试在表格中放置一个注释框（根据分配请求），而我的光标位置位于该框的中间，而不是应该位于其左上方的位置。

HTML代码：

<tr>
<td>Comments: <input id="comment" type="text" name="Comment" class="comment"/></td>
</tr>

CSS代码：

#comment {
float: right; 
display: block; 
padding-right: 10px; 
width:70%;
height:100px;
}

Answer 1

尝试使用textarea代替普通输入进行多行输入。 我认为这是您所期望的行为。

<tr>
  <td>Comments: <textarea id="comment" name="Comment" class="comment"></textarea></td>
</tr>

Answer 2

这是通过“ input”标签发生的。 您应该改用textarea。

<td>Comments: <textarea id="comment" name="Comment" class="comment"></textarea></td>

Answer 3

input用于单行输入，因此默认情况下它的行为类似于inline元素，并且文本行垂直居中。 基本上，即使您增加CSS的高度，在那个高大的盒子中也只能有一行。 继续尝试输入换行符。

因此，最好改用textarea ，例如：

<td>Comments: <textarea id="comment" name="Comment" class="comment">Some text</textarea></td>

请注意，内容包含在打开和关闭标记中，而不是包含在value属性中。

另请注意，如果您不打算在CSS或JavaScript中使用它，则不需要“ comment”类（ class="comment" ）。