如何在横幅上添加和对齐按钮？

Question

横幅应该靠近信息按钮，如下例所示：

我想将这个“Ads by Google”标签移离按钮。

function removeHeader() {
  var list = document.getElementById("main");
  list.removeChild(list.childNodes[0]);
}

body {
  margin: 100px;
}

.banner-buttons {
  display: inline-block;
  position: relative;
  font-size: 14px;
  width: 50px;
  overflow: hidden;
}

.showme {
  display: none;
  font-size: 10px;
}

.infoLink:hover .showme {
  display: inline-block;
  float: left;
}

.closeBtn {
  cursor: pointer;
  display: inline-block;
}

i:hover {
  color: #d075f4;
}

<div id="main">
  <div class="nanoSaturnBanner">
    <p>teteasdasdasdsadasds sad asdasdasdasdasdas</p>

    <div class="banner-buttons">
      <label class="showme">Ads by Google</label>
      <a class="infoLink" href="https://support.google.com/adsense/#topic=3373519" target="_blank">
        <i class="fas fa-info-circle"></i>
      </a>
      <div class="closeBtn" onclick="removeHeader()">
        <i class="far fa-window-close"></i>
      </div>
    </div>

  </div>

HTML代码：这是html，你会在那里找到两个按钮和图标。如果有什么遗漏，请询问，我会更新帖子。

Answer 1

尝试将p更改为div并将其移动到其他内容之后。然后添加CSS以移动广告部分：

<div id="main">
  <div class="nanoSaturnBanner">
    <div class="banner-buttons">
      <label class="showme">Ads by Google</label>
        <a class="infoLink" 
         href="https://support.google.com/adsense/#topic=3373519" 
         target="_blank">
         <i class="fas fa-info-circle"></i>
        </a>
    <div class="closeBtn" onclick="removeHeader()">
     <i class="far fa-window-close"></i>
  </div>
</div>
  <div id="text">teteasdasdasdsadasds sad asdasdasdasdasdas</div>
</div>

然后将其添加到新的div类

float: right;
margin-right: 50%;