Html 将按钮粘贴到 div 的右侧
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16832334/
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
Stick button to right side of div
提问by Andrew
What do I need to add in order to stick the button to the right side of the div on the same line as the header?
我需要添加什么才能将按钮粘贴到与标题同一行的 div 的右侧？
HTML:
HTML：
<div>
<h1> Ok </h1>
<button type='button'>Button</button>
</div>
CSS:
CSS：
div {
background: purple;
}
div h1 {
text-align: center;
}
div button {
}
More specifically:
进一步来说：
- The right side of the button should be x pixels away from the right edge of the div.
- It should be on the same line as the header.
- Should be contained in the div (stuff like float or relative positioning pops it out of the div visually)
- 按钮的右侧应该距离 div 的右边缘 x 像素。
- 它应该与标题在同一行。
- 应该包含在 div 中（像浮动或相对定位之类的东西在视觉上将它从 div 中弹出）
What CSS techniques can be used to do this? Thanks.
可以使用哪些 CSS 技术来做到这一点？谢谢。
回答by Andy
回答by ramsesoriginal
It depends on what exactly you want to achieve.
这取决于您究竟想要达到什么目的。
If you just want to have it on the right, then I'd recommend against using position absolute, because it opens a whole can of worms down the line.
如果你只是想让它在右边，那么我建议不要使用绝对位置，因为它会打开一整罐蠕虫。
The HTML can also be unchanged:
HTML 也可以保持不变：
HTML
HTML
<div>
<h1> Ok </h1>
<button type='button'>Button</button>
</div>
the CSS then should be something along the lines of:
CSS 然后应该是类似的东西：
CSS
CSS
div {
background: purple;
overflow: hidden;
}
div h1 {
text-align: center;
display: inline-block;
width: 100%;
margin-right: -50%;
}
div button {
float: right;
}
You can see it in action here: http://jsfiddle.net/azhH5/
你可以在这里看到它的实际效果：http: //jsfiddle.net/azhH5/
If you can change the HTML, then it gets a bit simpler:
如果您可以更改 HTML，则它会变得更简单：
HTML
HTML
<div>
<button type='button'>Button</button>
<h1> Ok </h1>
</div>
CSS
CSS
div {
background: purple;
overflow: hidden;
}
div h1 {
text-align: center;
}
div button {
float: right;
margin-left: -50%;
}
You can see it in action: http://jsfiddle.net/8WA3k/1/
你可以看到它在行动：http: //jsfiddle.net/8WA3k/1/
If you want to have the button on the same line as the Text, you can achieve it by doing this:
如果你想让按钮与文本在同一行，你可以通过这样做来实现：
HTML
HTML
<div>
<button type='button'>Button</button>
<h1> Ok </h1>
</div>
CSS
CSS
div {
background: purple;
overflow: hidden;
}
div h1 {
text-align: center;
}
div button {
float: right;
margin-left: -50%;
margin-top: 2em;
}
You an see that in action here: http://jsfiddle.net/EtqVh/1/
你可以在这里看到它的作用：http: //jsfiddle.net/EtqVh/1/
Cleary in the lest example you'd have to adjust the margin-top for the specified font-size of the <h1>
显然，在最坏的例子中，您必须为指定的字体大小调整 margin-top <h1>
EDIT:
编辑：
As you can see, it doesn't get popped out of the <div>, it's till inside. this is achieved by two things: the negative margin on the <button>, and the overflow: hidden;on the <div>
如您所见，它不会从 中弹出<div>，而是一直到里面。这是由两件事情来实现：在负利润率<button>，并overflow: hidden;在<div>
EDIT 2:
编辑2：
I just saw that you also want it to be a bit away from the margin on the right. That's easily achievable with this method. Just add margin-right: 1em;to the <button>, like this:
我刚刚看到您还希望它远离右侧的边缘。使用这种方法很容易实现。只需添加margin-right: 1em;到<button>，就像这样：
div {
background: purple;
overflow: hidden;
}
div h1 {
text-align: center;
}
div button {
float: right;
margin-left: -50%;
margin-top: 2em;
margin-right: 1em;
}
You can see it in action here: http://jsfiddle.net/QkvGb/
你可以在这里看到它的实际效果：http: //jsfiddle.net/QkvGb/
回答by Tonatio
Another solution: change margins. Depending on the siblings of the button, displayshould be modified.
另一个解决方案：更改边距。根据按钮的兄弟姐妹，display应该进行修改。
button {
display: block;
margin-left: auto;
margin-right: 0;
}
回答by Ahmed
<div>
<h1> Ok </h1>
<button type='button'>Button</button>
<div style="clear:both;"></div>
</div>
css
css
div {
background: purple;
}
div h1 {
text-align: center;
}
div button {
float: right;
margin-right:10px;
}
回答by Sunil Kumar
Use position property
使用位置属性
style="position: absolute;right:0;top:0"
回答by dotista2008
div {
display: flex;
flex-direction: row-reverse;
}
回答by Sadia Younas
<button style="float: right;" href="#">Send Request</button>回答by Aravind30790
change the CSS as follows:
更改 CSS 如下：
div button {
position:absolute;
right:10px;
top:25px;
}
