html - html & css form not lining up

Question

I'm trying to put a comment box within a table (As per assignment request) and my cursor position is in the middle of the box, rather than the top left as it should be.

HTML code:

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

CSS code:

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

Answer 1

尝试使用 atextarea而不是普通输入进行多行输入。我认为这是您所期望的行为。

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

工作示例

Answer 2

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

因此，您最好使用 atextarea代替，例如：

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

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

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

Answer 3

This happens with the 'input' tag. You should use a textarea instead.

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