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

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;，否则按钮将不会停留在右侧（您可以使用float，但这可能是有问题的恕我直言）。高度/颜色等当然是可调的。

希望这会有所帮助

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