Question

当在表格内添加提交按钮时，整个表格中的单元格填充会变大。按钮位于单元格的最顶部。我希望它位于中心，减少了细胞填充。没有什么对我有用......

<html>    
    <head>    
        <style type = "text/css">    
            td {border:1px solid black;}    
        </style>    
    </head>    
    <body>    
        <table>    
            <tr>
                <td>Fish</td>
                <td>Salmon</td>
                <td>Trout</td>
                <td>Steak</td>
                <td><form><input type = "submit"></input></form></td>
            </tr>    
        </table>    
    </body>    
</html>

Answer 1

这是由于form元素具有一些默认边距和填充。您可以通过将以下内容添加到样式表来将这些重置为零：

form {margin: 0; padding:0;}

然后你可以正常设置表格的其余部分。考虑使用某种CSS重置脚本，如Eric Meyer的：

http://meyerweb.com/eric/tools/css/reset/

Answer 2

一种解决方案可以是：

<html>

<head>

<style type = "text/css">

td {
    border:1px solid black;
}

td form {
    display : table-cell;
    vertical-align: middle;
    margin : 0;
    padding : 0;
}

</style>

</head>

<body>

<table>

<tr>
<td>Fish</td>
<td>Salmon</td>
<td>Trout</td>
<td>Steak</td>
<td><form><input type = "submit" /></form></td>
</tr>

</table>

</body>

</html>

试一试：D

Answer 3

你可以试试这个

<td><form><input type = "submit" style="margin:0;"></input></form></td>

带有提交按钮的HTML表格单元格填充

3 个答案: