输入按钮彼此相邻，一个表单一个新页面
Posted
技术标签:
【中文标题】输入按钮彼此相邻，一个表单一个新页面【英文标题】：input buttons next to each other, one form one new page 【发布时间】：2018-01-06 00:40:16 【问题描述】：我想要两个按钮，一个提交数据，另一个返回到其他页面，居中并彼此相邻。我可以居中，但不能在同一条线上。
以下代码使用 2 种形式，这两个功能都可以正常工作，但一个按钮位于另一个下方。
<body>
<div id='main_body'>
<form action='' method="post">
<input type="text" name="firstname"><br>
<input id ='button' type='submit' name='submit' value='Update' >
</form>
<form>
<form action="index.php" method="post">
<input id ='button' type="submit" value="Home" />
</form>
</div>
</body>
【问题讨论】：
你能展示你尝试了什么吗？ 您要添加垂直居中还是水平居中？ 感谢 flex 选项。我以前没用过。我真的很想把 2 个输入按钮放在自己的容器中，独立于表单容器。 标题和链接在自己的 div 中。主 div 包含输入字段。所以我需要在不破坏表格格式的情况下将 Home 按钮放在同一个 div 中。 @marsheng 能否请您发布图片中所有元素的 html 代码，我已经为您提供了相应的 CSS？顺便说一句，这是否允许更改 HTML？ 【参考方案1】：看到这个： 希望对您有所帮助。
main_body
position: relative;
#bt1
position: absolute;
display: inline;
#bt2
position: absolute;
margin-left: 60px;
margin-top: 21px;
<div id='main_body'>
<div id="bt1">
<form action='' method="post">
<input type="text" name="firstname"><br>
<input id='button' type='submit' name='submit' value='Update'>
</form>
</div>
<div id="bt2">
<form action="index.php" method="post">
<input id='button' type="submit" value="Home" />
</form>
</div>
</div>【讨论】：
【参考方案2】：您可以使用 flexbox 来实现所需的布局。如果您希望项目之间有一些空间，还可以添加边距。演示：
#main_body,
#main_body > *
display: flex;
/* align-items in one column */
flex-direction: column;
/* add horizontal centering */
align-items: center;
#main_body
/* add vertical centering */
justify-content: center;
/* optional styles, just add more offset for second form */
#main_body > form + form
margin-top: 20px;
<div id='main_body'>
<form action='' method="post">
<input type="text" name="firstname"><br>
<input id='button' type='submit' name='submit' value='Update'>
</form>
<form action="index.php" method="post">
<input id='button' type="submit" value="Home" />
</form>
</div>【讨论】：
我忘记添加 JPG。该示例是我的页面的简化版本。按钮需要出现在表单的底部。 @marsheng 更新了我的答案以满足您的需求。以上是关于输入按钮彼此相邻，一个表单一个新页面的主要内容，如果未能解决你的问题，请参考以下文章