将按钮粘贴到 div 的右侧

Question

http://jsfiddle.net/kn5sH/

我需要添加什么才能将按钮粘贴到与标题同一行的 div 右侧？

HTML:

 <div>
    <h1> Ok </h1>
    <button type='button'>Button</button>
</div>

CSS：

 div {
    background: purple;
}

div h1 {
    text-align: center;
}

div button {
}

进一步来说：

1. 按钮的右侧应与 div 的右边缘相距 x 像素。
2. 它应该与标题在同一行。
3. 应该包含在 div 中（浮动或相对定位之类的东西在视觉上将其从 div 中弹出）

可以使用哪些 CSS 技术来做到这一点？谢谢。

原文由 Andrew 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

通常我会建议浮动，但根据您的 3 个要求，我建议这样做：

 position: absolute;
right: 10px;
top: 5px;

不要忘记父 div 上的 position: relative;

演示

原文由 Andy 发布，翻译遵循 CC BY-SA 3.0 许可协议