Html 如何在同一行上对齐两个提交按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15986948/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to align two submit button on same line
提问by user2086641
I have a page with two submit button for different purpose,i assigned inside the table ,i am trying to align it in the same line.
我有一个页面有两个提交按钮用于不同的目的，我分配在表格内，我试图将它对齐在同一行中。
html is
html是
<td>
<div>
Involved:
<form>
<input type="submit" value="Add from list">
</form>
<p>or</p>
<form>
<input type="submit" value="Type a name">
</form>
</div>
</td>
The above will produce the buttons and words in same line,i want it to be happen in same line.
以上将在同一行中生成按钮和单词，我希望它发生在同一行。
seem to be like "involved (type a name) or (add from list)",
似乎是“参与（输入名称）或（从列表中添加）”，
may i know how to do this.
我可以知道怎么做吗？
Thanks,
谢谢，
采纳答案by monkeyinsight
You have a mess with your html, no need in that much elements
你的 html 弄得一团糟，不需要那么多元素
<td>
<form>Involved: <input type="submit" value="Add from list"> or <input type="submit" value="Type a name"></form>
</td>
回答by Kevin Lynch
You can use <div>and not tables. Give the buttons a CSS value of display:inline-block;
您可以使用<div>而不是表格。给按钮一个 CSS 值display:inline-block;
回答by Sunny
try this css
试试这个 css
div#frm *{display:inline}
and html
和 html
<div id="frm">
Involved:
<form>
<input type="submit" value="Add from list">
</form>
<p>or</p>
<form>
<input type="submit" value="Type a name">
</form>
</div>
回答by Tushar Soni
<div style="display: inline;" align="center">
<div style="float: left;">
<button style="color: white; padding: 15px 32px; text-align: center; text-decoration: none; border-radius: 4px; display: inline-block; font-size: 100%;">Hello</button>
</div>
<div style="float: right;">
<button style="color: white; background-color: #4caf50; padding: 15px 32px; text-align: center; text-decoration: none; border-radius: 4px; display: inline-block; font-size: 100%;">Hello</button>
</div>
</div>
回答by Ezix
First, you code wasn't valid because of an ending div block in the middle.
首先，您的代码无效，因为中间有一个结束的 div 块。
Then, form is a block element, that's why your browser will only display it on a new line (at least, without any style applied to it).
然后，form 是一个块元素，这就是为什么您的浏览器只会在新行上显示它（至少，没有对其应用任何样式）。
So what you can do is make it an inline element with the propriety "display: inline-block". Same for you paragraph, it isn't needed, if you want to add it anyway, as it's also a block element, make sure to apply this style and make it inline.
因此，您可以做的是使其成为具有"display: inline-block" 属性的内联元素。对于您的段落也是如此，它不是必需的，如果您无论如何都想添加它，因为它也是一个块元素，请确保应用此样式并使其内联。
<div>
Involved:
<form style="display:inline-block">
<input type="submit" value="Add from list">
</form> or
<form style="display:inline-block">
<input type="submit" value="Type a name">
</form>
</div>
More information on inline vs block elements here
回答by Phillipe Rosário
<!DOCTYPE html>
<html>
<head>
<style>
form {display: inline-block;}
</style>
</head>
<body>
<table>
<tr>
<td>
<form>
<label>Involved:</label>
<input type="submit" value="Add from list">
</form>
<form>
<label>or</label>
<input type="submit" value="Type a name">
</form>
</td>
</tr>
</table>
</body>
</html>
