Html 如何在标题旁边放置按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29578633/
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 do I place a button next to a heading?
提问by Joe
I thought using float: right;would fix this, but it makes the button appear outside of the div. How do I solve this?
我认为使用float: right;会解决这个问题，但它使按钮出现在 div 之外。我该如何解决这个问题？
HTML
HTML
<div id="main">
<h1>Title</h1> <button>Button</button>
</div>
CSS
CSS
#main {
width: 200px;
border: 1px dotted black;
}
h1 {
margin: 0;
}
button {
float: right;
}
回答by Turnip
Give your h1display: inline-blockto allow your elements to occupy the same row...
给你h1display: inline-block让你的元素占据同一行......
#main {
width: 200px;
border: 1px dotted black;
}
h1 {
margin: 0;
display: inline-block;
}
button {
float: right;
}<div id="main">
<h1>Title</h1> <button>Button</button>
</div>回答by Rahul Tripathi
Try like this:
像这样尝试：
<div id="main">
<h1> Title <button>Button</button></h1>
</div>
or you can use the display:inlineso they appear side-by-side.
或者您可以使用display:inline使它们并排显示。
