Question

所以，我有一个padding-top来定义<textarea>和表格边框之间的空格。

我需要在<textarea>和表格边框之间添加一个小的边距。如果我没有添加padding-top <textarea>略微上升，请执行以下操作：http://i.imgur.com/Pq2NINo.png

如您所见，<textarea>略高于其他行内容的位置。

当我在我的CSS文件中添加padding-top:10px;时，<textarea>会展开，而不是像我这样假装，http://i.imgur.com/ittVeUl.png

我需要<textarea>像其他表行中的文本框一样居中。

这是我的HTML代码：

echo "<tr><td><input type='checkbox' name='checkbox[]' id='checkbox[]' value='".$ppid_reg."' /></td>
<td><input type='text' class='datepicker' name='ppdata[]' value='$ppdata' placeholder='dd-mm-aaaa'></td>";
echo "<td><input type='text' name='ppemp[]' value='$ppemp'></td>";
echo "<td><textarea rows='1' cols='20' name='ppdesc[]' form='form'>$ppdesc</textarea>";

（永远不要记住变量和回声）

我删除并更改了textarea的行数和列数，但结果是一样的。

CSS：

th, td {padding:0px 10px 10px; text-align:center; }

提前致谢。

Answer 1

尝试：

vertical-align: middle;

text-align仅关注水平对齐。

Answer 2

如果你想把空间放在textarea上面，你必须使用保证金

textarea {margin: 10px 0 0;}

如果您正在使用表格并希望垂直居中文本区域，则可以垂直对齐

th, td{vertical-align: middle;}

请记住，您需要一个用于垂直对齐的表格单元格

Answer 3

只需将浮动左侧添加到输入和textarea即可。然后你可以调整行高以使它们的高度相同。

<强> HTML

<table>
   <tr>
       <td><input type="text" /></td>
       <td><input type="text" /></td>
       <td><textarea rows='1' cols='20'></textarea></td>
    </tr>
</table>

<强> CSS

table{border:1px solid;border-collapse:collapse;}
td{padding:5px;border:1px solid;}
textarea{resize:none;padding:0 5px;line-height:32px;float:left;border:1px #ddd    solid;height:30px;}
input{padding:0 5px;line-height:30px;float:left;border:1px #ddd solid;height:30px;}

小提琴链接在下面

http://jsfiddle.net/murli2308/wye2s/2/

填充扩展了<textarea> </textarea>的大小

3 个答案: