将按钮粘贴到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技术来做到这一点？谢谢.

Answer 1

通常我会建议浮动,但从你的3个要求我会建议:

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

不要忘记position: relative;父div

DEMO

Answer 2

这取决于你想要达到的目标.

如果你只是想让它在右边,那么我建议不要使用绝对位置,因为它会打开一大堆蠕虫.

HTML也可以保持不变:

HTML

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

那么CSS应该是这样的:

CSS

div {
    background: purple;
    overflow: hidden;
}

div h1 {
    text-align: center;
    display: inline-block;
    width: 100%;
    margin-right: -50%;
}

div button {
    float: right;
}

你可以在这里看到它:http://jsfiddle.net/azhH5/

如果您可以更改HTML,那么它会变得更简单:

HTML

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

CSS

div {
    background: purple;
    overflow: hidden;
}

div h1 {
    text-align: center;
}

div button {
    float: right;
    margin-left: -50%;
}

你可以看到它的实际效果:http://jsfiddle.net/8WA3k/1/

如果你想让按钮与文本在同一行,你可以通过这样做来实现:

HTML

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

CSS

div {
    background: purple;
    overflow: hidden;
}

div h1 {
    text-align: center;
}

div button {
    float: right;
    margin-left: -50%;
    margin-top: 2em;
}

你看到这里的行动:http://jsfiddle.net/EtqVh/1/

在最恐怖的例子中,您必须调整指定字体大小的margin-top <h1>

编辑:

正如你所看到的,它不会弹出<div>,直到内部.这是通过两件事来实现的:负的边缘<button>,而且overflow: hidden;是<div>

编辑2:

我刚看到你也想让它离右边的边缘有点远.用这种方法很容易实现.只需添加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;
}

你可以在这里看到它:http://jsfiddle.net/QkvGb/

Answer 3

另一种解决方案:改变利润率.根据按钮的兄弟姐妹,display应进行修改.

button {
    display:      block;
    margin-left:  auto;
    margin-right: 0;
}

Answer 4

<div>
    <h1> Ok </h1>
    <button type='button'>Button</button>
    <div style="clear:both;"></div>
</div>

的CSS

div {
    background: purple;
}

div h1 {
    text-align: center;
}

div button {
    float: right;
    margin-right:10px;

}

Answer 5

div {
 display: flex;
 flex-direction: row-reverse;
}