Html 彼此相邻的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16882346/
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
Buttons next to each other
提问by Gelu
I have two buttons and I want to put them next to each other. How could I do it? Everytime a button is under the other. Here's the code:
我有两个按钮，我想把它们放在一起。我怎么能做到？每次一个按钮都在另一个下面。这是代码：
CSS:
CSS：
<style type="text/css">
.button_example{
border:1px solid #B7B7B7;
text-align: center;
color: #FFFFFF;
background-color: #D3D3D3;
}
.button_example:hover{
border:1px solid #B7B7B7;
text-align: center;
color: #1f1f1f;
background-color: #ffffff;
}
</style></head>
and the HTML:
和HTML：
<div align="right"><a href="http://www.theamazingmonth.pusku.com/rules.html"><input type="button" class="button_example" value="Rules" /></a></div>
<div align="right"><a href="http://www.theamazingmonth.pusku.com/info.html"><input type="button" class="button_example" value="Info" /></a></div>
Thanks in advance!
提前致谢！
回答by Nirus
Check out the jSFiDDLE
查看jSFiDDLE
remove the extra div tag and enclose both a tag under one div tag
删除额外的 div 标签并将两个标签都放在一个 div 标签下
like this:
像这样：
<div align="right">
<a href="http://www.theamazingmonth.pusku.com/rules.html"><input type="button" class="button_example" value="Rules" /></a>
<a href="http://www.theamazingmonth.pusku.com/info.html"><input type="button" class="button_example" value="Info" /></a>
</div>
回答by ebram khalil
You need to do 3 things:
你需要做3件事：
- remove the
align="right"and replace it withfloat:right. - Remove the extra
<br>inside your code. - Add div with css
clear:bothafter you finish your buttons.
- 删除
align="right"并将其替换为float:right。 - 删除
<br>代码中的额外内容。 clear:both完成按钮后，使用 css 添加 div 。
回答by codename-
At first - you have mess in your HTML part:
起初 - 你的 HTML 部分一团糟：
<div><a><input/></div></a>
<div><a><input/></div></a>
You should have:
你应该有：
<div><a><input/></a></div>
<div><a><input/></a></div>
At second – if you want clickable button why don't use a <button>tag instead of <a><input></a>?
其次——如果你想要可点击的按钮，为什么不使用<button>标签而不是<a><input></a>？
And the final. Try add this style to your div's:
还有决赛。尝试将此样式添加到您的 div：
float: right;
But you need add some clearitem after this. For example:
但是您需要clear在此之后添加一些项目。例如：
<br class="clearFloat">
and css
和CSS
.clearFloat { clear: both; }
回答by kesava reddy
Remove 2 div's, use only one div and add the CSS as provided below:
删除 2 个 div，仅使用一个 div 并添加如下提供的 CSS：
#butn{
margin: 0 auto;
display: block;
}<div id="butn" align="right">
<a href="http://www.theamazingmonth.pusku.com/rules.html"><input type="button" class="button_example" value="Rules" /></a>
<a href="http://www.theamazingmonth.pusku.com/info.html"><input type="button" class="button_example" value="Info" /></a>
</div>