将按钮粘贴到 div 的右侧答案

【问题标题】：Stick button to right side of div将按钮粘贴到 div 的右侧
【发布时间】：2022-02-09 16:25:03
【问题描述】：

我需要添加什么才能将按钮粘贴到 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 技术来做到这一点？谢谢。

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

DEMO

【讨论】：

谢谢，这很好用。我试过了，但忘记了将它推到 div 下方的 'top' 属性。

【解决方案2】：

另一种解决方案：更改边距。根据按钮的兄弟姐妹，display 应该被修改。

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

【讨论】：

这是一个完美而简单的解决方案！
这是最好的解决方案

【解决方案3】：

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

如果你只是想把它放在右边，那么我建议不要使用绝对位置，因为它会打开一整罐蠕虫。

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> 上的负边距和<div> 上的overflow: hidden;

编辑 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/

【讨论】：

您能否进一步详细说明overflow: hidden 在这种情况下的帮助？还有那个负边距。
救命稻草。 tq非常

【解决方案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;

}

【讨论】：

谢谢。这和上面的一样有效，我也尝试了这种方法，但没有在按钮元素下应用'clear：both'。我很接近！

【解决方案5】：

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

【讨论】：

虽然此代码可能会回答问题，但添加代码说明将对未来的读者有所帮助。

【解决方案6】：

使用位置属性

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

【讨论】：

【解决方案7】：

按如下方式更改 CSS：

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

【讨论】：

【解决方案8】：

margin-left:  auto;

对我来说足够了

【讨论】：