Question

我有一个HTML表单，除了表格中的提交按钮外，我还有所有输入。除了提交按钮之外，我将所有内容都集中在桌面上，即使我尝试了很多东西来使其无效。请帮助我将我的提交按钮放在我的桌子下面与其他输入！

这是我的HTML页面：

<html>
<head>
    <link rel="stylesheet" href="Site.css">
    <?php include("Header.php"); ?>
    </div>
</head>

<body>
    <div id="main">
        <h1>About</h1>

        <form action="Insert.php" method="post">
            <table>
                <tr>
                    <td><span>First name:</span></td>
                    <td><input type="text" name="firstname"></td>
                </tr>
                <tr>
                    <td><span>Last name:</span></td>
                    <td><input type="text" name="lastname"></td>
                </tr>
                <tr>
                    <td><span>Age:</span></td>
                    <td><input type="number" name="age"></td>
                </tr>
            </table>

            <input type="submit">
        </form>

        <?php include("Footer.php");?>
    </div> 
</body>
</html>

这是我的CSS：

body {
font-family: "Trebuchet MS", Verdana, sans-serif;
background-color: #4C875E;
color: #C9C9C9;
}

#main {
padding: 20px;
background-color: #1C404A;
border-radius: 0 4px 4px 4px;
}

h1 {
border-bottom: 3px solid #4C875E;
color: #4C875E;
}

#swag {
left: 0;
    line-height: 200px;
margin-top: -100px;
position: absolute;
top: 50%;
width: 100%;
border-bottom: 0;
text-align: center;
color: #BABABA;
}

ul#menu {
padding: 0;
position: relative;
margin: 0;
}

ul#menu li {
display: inline;
}

ul#menu li a {
background-color: #1C404A;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
color: #C9C9C9;
border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
background-color: #e8eef4;
}

#bg {
background: url(assets/banner.jpg) no-repeat center center fixed;
background-size: 100% auto;
}

table {
margin: 0 auto;
}

Answer 1

试试这个：

 <tr>
    <td><input type="submit"></td>
 </tr>    
</table>

Working Example

Answer 2

尝试把它放在你的桌子里：

 <table>
                <tr>
                    <td><span>First name:</span></td>
                    <td><input type="text" name="firstname"></td>
                </tr>
                <tr>
                    <td><span>Last name:</span></td>
                    <td><input type="text" name="lastname"></td>
                </tr>
                <tr>
                    <td><span>Age:</span></td>
                    <td><input type="number" name="age"></td>
                </tr>
                <tr>
                <td colspan='2'><center><input type="submit"></center></td>
                </tr>
            </table>

FIDDLE

Answer 3

试试这个：

    <center><input type="submit"></center>

Answer 4

LIVE DEMO

您应该将输入按钮放在新行的表格中使用td colspan合并2列为了使按钮居中，请使用属性align="center"。

<强>代码

            <table>
                <tr>
                    <td><span>First name:</span></td>
                    <td><input type="text" name="firstname"/></td>
                </tr>
                <tr>
                    <td><span>Last name:</span></td>
                    <td><input type="text" name="lastname"/></td>
                </tr>
                <tr>
                    <td><span>Age:</span></td>
                    <td><input type="number" name="age"/></td>
                </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit"/></td>
              </tr>    
                </table>

Answer 5

据我所知，没有确切的方法可以通过一个命令将CSS集中在CSS中。但是，有一些方法可以手动完成。我会做两件事之一。首先（请原谅我，如果这看起来太简单了）我可能会添加像＆amp; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;在提交按钮前面。这样就可以在它前面添加一些空间（如果用户放大，它会很好地缩放）。

我要做的另一件事（可能是更好的解决方案）是更改父div的宽度（以便它足够宽以适合表单），然后得到它的宽度： / p>

parseInt(getComputedStyle(document.getElementById('main')).width)

除以2得到中心，然后将按钮放在中间减去按钮宽度的一半：

parseInt(getComputedStyle(getElementById("mySubmitButtonId")).width)

注意：使用margin-left

放置它

提交按钮不居中

5 个答案: