如何将右侧的按钮放入 div 中？答案

【问题标题】：How can I put a button to right side into the div?如何将右侧的按钮放入 div 中？
【发布时间】：2021-11-23 03:35:47
【问题描述】：

**如何在右上角放置一个按钮，左边是空白？ **

<div class="newsletter">
  <button class="goup">GO UP</button>  *How can I put this btn to the right with full white space??*
  <div class="left-side">
    <a href="">Shop</a>
    <a href="">About</a>
    <a href="">Support</a>
    <a href="">COVID-19 Info</a>
    <a href="">Order Status</a>
    <a href="">Corporate Sales</a>
  </div>

         
    //CSS 
   .newsletter {
    position: relative;
    overflow: hidden;
    background-color: #f9f9f9;
  }

  .goup {
    width: 81px;
    height: 81px;
    border: none;
    padding: 25px 30px;
    font-size: 16px;
    font-weight: 700;
    background-color: #000;
    color: #fff;
    display: flex;
    float: right;
    justify-content: right;
  }

  .left-side {
    position: relative;
  }

我怎样才能把这个 btn 放在右边的空白处？？

Like This One

【问题讨论】：

您可以发送按钮现在正在做什么的屏幕截图吗？只是为了让我看看有什么问题。
我刚刚克隆了 Grovemade 网站 (grovemade.com)。该按钮位于页脚部分之前。

标签： html css button css-float css-position

【解决方案1】：

float: right 的问题在于，虽然它确实将元素放在了右边，但它的设计是为了让其他元素围绕它浮动，而不是在它自己的左边留出空间。

这个 sn-p 删除了 this 和它的 justify-content: right，因为您实际上希望它的内容在其自身中居中。

有多种方法可以将其移至右侧。这个 sn-p 使用一个简单的，不需要更改其他元素。它通过将元素向左移动 100%，然后以自身宽度的 100% 向后移动，将元素向右移动。

.newsletter {
  position: relative;
  overflow: hidden;
  background-color: #f9f9f9;
}

.goup {
  width: 81px;
  height: 81px;
  border: none;
  padding: 25px 30px;
  font-size: 16px;
  font-weight: 700;
  background-color: #000;
  color: #fff;
  display: flex;
  position: relative;
  left: 100%;
  transform: translateX(-100%);
}

<div class="newsletter">
  <button class="goup">GO UP</button>
  <!--How can I put this btn to the right with full white space??-->
  <div class="left-side">
    <a href="">Shop</a>
    <a href="">About</a>
    <a href="">Support</a>
    <a href="">COVID-19 Info</a>
    <a href="">Order Status</a>
    <a href="">Corporate Sales</a>
  </div>

【讨论】：

非常感谢！！！ :)