时间戳

首页 > 解决方案 > 如何创建右对齐的注销按钮？

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

问题描述

我的顶部 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>

标签： htmlcss

解决方案

你可以在这里使用 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/

推荐阅读