如何在横幅中添加并对齐按钮？调整横幅与标签布局需求

我来帮你一步步搞定这几个布局需求：

1. 在横幅中添加并对齐按钮 #

要在横幅里添加并对齐按钮，最方便的方式是用Flex布局来控制容器内元素的排列。我们可以给横幅容器（比如假设是.banner-container）设置display: flex，然后通过justify-content来控制对齐方式（比如右对齐用flex-end，两端对齐用space-between），同时用align-items保证垂直居中。

修改后的CSS示例：

/* 假设横幅容器类名为banner-container */
.banner-container {
  display: flex;
  align-items: center; /* 垂直居中所有元素 */
  justify-content: flex-end; /* 按钮右对齐，可按需调整 */
  width: 100%;
}

.banner-buttons {
  display: inline-block;
  position: relative;
  font-size: 14px;
  width: auto; /* 改成auto，避免固定宽度限制按钮内容 */
  overflow: hidden;
  margin-left: 10px; /* 多个按钮之间的间距 */
}

2. 让横幅与信息按钮紧密贴合 #

要让横幅和信息按钮无缝贴合，核心是去掉不必要的外边距（margin）和内边距（padding），同时确保元素的定位方式一致。比如给信息按钮的父元素.infoLink和横幅容器都清除默认边距，甚至可以把它们放到同一个Flex容器里：

.infoLink {
  margin: 0; /* 去掉默认外边距 */
  display: flex;
  align-items: center; /* 和横幅元素垂直对齐 */
}

.banner-container {
  margin: 0; /* 去掉横幅的外边距 */
  padding: 0; /* 去掉横幅的内边距 */
}

这样两者就能紧密挨在一起，不会有多余的空隙。

3. 移动“Ads by Google”标签远离按钮 #

要让标签向左移动并远离按钮，有两种简单的方法：

• 给标签（.showme）添加右侧外边距，直接拉开和按钮的距离
• 利用Flex布局的margin-left: auto让按钮自动靠右，自然分隔开标签和按钮

推荐第二种方法，更灵活：

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

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

/* 让按钮自动靠右，和标签拉开距离 */
.banner-buttons {
  margin-left: auto;
}

这样标签就会停留在左侧，按钮靠右，两者的间距会自动适配容器宽度，也能满足你“标签向左移动远离按钮”的需求。

最后补全你的完整代码示例：

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

body { 
  margin: 100px; 
}

.banner-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.banner-buttons {
  display: inline-block;
  position: relative;
  font-size: 14px;
  width: auto;
  overflow: hidden;
  margin-left: auto; /* 按钮靠右分隔标签 */
}

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

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

/* 补全关闭按钮的基础样式 */
.close {
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
  font-size: 12px;
}

内容的提问来源于stack exchange，提问作者James Delaney