Html 两个按钮并排
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18289525/
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
Two buttons side by side
提问by Tyler Rinker
I am trying to make two hyperlinked buttons go side by side. I saw this questionbut can not make the answers work. Below are my two attempts to make the buttons go side by side. The first attempt works but hyperlinks to the wrong location. The second one hyperlinks correctly but is not side by side. The third based on this questiondoesn't link anywhere but I think that has to do with using links instead of Javascript:submitRequests().
我试图让两个超链接按钮并排。我看到了这个问题，但无法使答案起作用。下面是我让按钮并排放置的两次尝试。第一次尝试有效，但超链接到错误的位置。第二个超链接正确但不是并排的。基于这个问题的第三个没有链接到任何地方，但我认为这与使用链接而不是Javascript:submitRequests().
<!DOCTYPE html>
<html>
<body>
<head>
<style>
.container {
overflow: hidden;
}
button {
float: left;
}
button:first-child {
margin-right: 5px;
}
</style>
</head>
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
</form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
Attempt 1
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
</form>
Attempt 2
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
</form><form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
Attempt 3
<div class="container">
<button onclick="http://trinker.github.io/qdap_dev/paste2.html">paste2</button>
<button onclick="http://trinker.github.io/qdap_dev/colSplit.html">colSplit</button> text
</div>
</body>
</html>
回答by lc.
If you just need plain links to work, just use linksand style them to look like buttons (see also Styling an anchor tag to look like a submit button):
如果您只需要简单的链接来工作，只需使用链接并将它们设置为看起来像按钮（另请参阅将锚标记样式设置为看起来像提交按钮）：
<style>
.button {
appearance: button;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
font: menu;
color: ButtonText;
display: inline-block;
padding: 2px 8px;
}
</style>
<div class="container">
<a href="http://trinker.github.io/qdap_dev/paste2.html" class="button">paste2</a>
<a href="http://trinker.github.io/qdap_dev/colSplit.html" class="button">colSplit</a> text
</div>
You couldalso do <a href="..."><button>paste2</button></a>but this is not actually legal HTML5. FWIW, Firefox does seem to render it correctly though.
您也可以这样做，<a href="..."><button>paste2</button></a>但这实际上不是合法的 HTML5。FWIW，Firefox 似乎确实正确呈现它。
回答by Bill Criswell
buttons would line up side by side automatically since they're display: inline-blockby default (I think). I'd remove the float: leftsince it could be causing some issues when nesting.
buttons 会自动并排排列，因为它们是display: inline-block默认的（我认为）。我会删除 ，float: left因为它可能会在嵌套时引起一些问题。
You should never nest forms. It'll lead to some really screwy things.
你永远不应该嵌套表单。它会导致一些非常棘手的事情。
However, if you want two forms side by side you can make them do that by adding display: inlineto them. Here's a small demo: http://jsbin.com/UgaMiYu/1/edit
但是，如果您希望两个表单并排放置，您可以通过添加display: inline它们来实现。这是一个小演示：http: //jsbin.com/UgaMiYu/1/edit
The onclickattribute should't make any difference at all.
该onclick属性根本不应该有任何区别。
回答by Unknown
I just tried to add css to attempt 2. how about this:
我只是尝试添加 css 来尝试 2. 这个怎么样：
HTML:
HTML：
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2"/></form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit"/>
</form>
CSS:
CSS：
form{
float:left;
}
DEMO:http://jsfiddle.net/uzDZN/
演示：http : //jsfiddle.net/uzDZN/
NOTE:Add class to form which has this buttons. Otherwise css may effect other form elements in website.
注意：将类添加到具有此按钮的表单中。否则 css 可能会影响网站中的其他表单元素。
回答by Darwin Airola
Utilizing regular buttons and setting their display property to either inline or inline-block worked for me.
使用常规按钮并将其显示属性设置为 inline 或 inline-block 对我有用。
