如何创建右对齐的注销按钮？

Question

我的顶部 div 充当徽标并具有标题。我希望注销按钮位于 div 的右侧，并且上面的文本也右对齐。

我忽略了按钮/链接，因为我不知道该放在哪里。
我正在寻找这样的东西：

我的目标是一个徽标，右侧是顶部带有文字的注销按钮。
我怎样才能做到这一点？

.logo {
  overflow: hidden;
  text-align: left;
  position: relative;
  margin: 0px 100px;
  height: 60px;
  background-color: pink;
  color: blue;
  font-family: Arial;
}

<div class="logo">
  <h1>LOGO</h1>
</div>

Answer 1

你可以在这里使用 flexbox。试试这个：

.wrap {
  display: flex;
  justify-content: space-between;
}

.logo {
  overflow: hidden;
  text-align: left;
  position: relative;
  height: 60px;
  background-color: white;
  color: #1F6C8B;
  font-family: Arial;
}

<div class='wrap'>
  <div class="logo">
    <h1>LOGO</h1>
  </div>
  <div>
    <p>abcdefg</p>
    <button>Click It</button>
  </div>
</div>

jsfiddle：https://jsfiddle.net/dm198kpx/2/

Answer 2

有多种方法可以实现您想要的。我相信最简单的是Flexbox:

.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

<div class="flex justify-between">
  LOGO
  <div>
    BLABLABLA<br>
    <button>Logout</button>
  </div>
</div>

这里，flex 是一个display 属性，通常用于容器类型的元素（如div）。它有助于对齐内容。它允许使用各种其他属性，如justify-content、align-items* 等。在这种情况下，我们只使用justify-content，它将主轴上的直接子代（默认为水平轴）与space-between 值对齐，它尽可能地分发内容 - 因为我们只有两个<div class="flex justify-between">、LOGO 和 <div> 的直接子代，将第一个放在最左边，最后一个放在最右边。

*：您可以在此游戏中了解更多有关 Flexbox 属性和用例的信息：https://flexboxfroggy.com/

Answer 3

我已将按钮添加到我认为您的标题中？我使用了原生的header 标签，但如果它不是您的标头，您可以随时将其替换为具有您选择的唯一 id 的 div。我在css中包含position:fixed;，否则按钮不会停留在右侧（您可以使用浮动，但恕我直言）。高度/颜色等当然是可调的。

希望对你有帮助

h1.logo {
  display: inline-block;
  position: relative;
  text-align: left;
  margin: 10px 100px;
  height: 60px;
  background-color: white;
  color: #1F6C8B;
  font-family: Arial;
}

#logout {
  background-color: lightblue;
  height: 30px;
  text-align: right;
  right: 40px;
  position: fixed;
}

.logo,
#logout {
  vertical-align: top;
}

<header>
  <h1 class="logo">LOGO</h1>
  <button id="logout">Logout</button>
</header>

编辑：刚刚看到上面对您的问题进行的编辑。见fiddle