Question

我需要添加什么才能将按钮固定在与标题位于同一行的div的右侧？

HTML：

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

CSS：

div {
    background: purple;
}

div h1 {
    text-align: center;
}

div button {
}

更具体地说：

按钮的右侧应距离右侧x像素 div的边缘。
它应与标题位于同一行。
应该包含在div中（像float或relative这样的东西定位会在视觉上将其弹出div）

可以使用哪些CSS技术来执行此操作？感谢。

Answer 1

通常情况下我会建议浮动，但根据你的3个要求，我会建议：

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

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

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/

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

修改

正如你所看到的，它不会从<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

使用位置属性

style="position: absolute;right:0;top:0"

Answer 6

按如下方式更改CSS：

div button {
position:absolute;
    right:10px;
    top:25px;
}

Answer 7

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

将按钮粘贴到div的右侧

7 个答案: