CSS图片白色圆环问题及下拉菜单布局调整需求

问题1：移除英国国旗外围的白色圆环 #

白色圆环是按钮的padding和默认白色背景导致的，修改方案：

• 清除.lang-dropbtn的padding，让国旗图片完全填充按钮区域
• 设置按钮背景为透明（background: transparent），消除默认白色背景
• 统一按钮和国旗尺寸（设为50px，和下拉区国旗一致），移除图片的内联尺寸样式

问题2：让上方国旗居中显示在英国国旗正上方 #

通过绝对定位的偏移变换实现水平居中：

• 给.lang-dropdown-content添加left: 50%和transform: translateX(-50%)，使其相对于父容器水平居中
• 微调bottom值，保证下拉内容和按钮的间距合理

修改后的完整代码 #

JavaScript

document.querySelector('.lang-dropbtn').addEventListener('click', function(event) {
  document.querySelector('.lang-dropdown-content').classList.toggle('show');
  event.stopPropagation();
});

window.onclick = function(event) {
  if (!event.target.closest('.language-dropdown')) {
    const dropdowns = document.getElementsByClassName("lang-dropdown-content");
    for (let i = 0; i < dropdowns.length; i++) {
      dropdowns[i].style.display = 'none';
    }
  }
}

CSS

.language-dropdown {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: inline-block;
  z-index: 2000;
}

.lang-dropbtn {
  padding: 0;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  background: transparent;
  width: 50px;
  height: 50px;
}

.lang-dropdown-content {
  display: none;
  position: absolute;
  bottom: 65px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  padding: 5px;
}

.lang-dropdown-content .lang-a {
  display: block;
  margin: 5px 0;
}

.lang-dropdown-content .lang-img {
  width: 50px;
  height: auto;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
}

.lang-dropdown-content.show {
  display: block;
}

.language-dropdown:hover .lang-dropdown-content {
  display: block;
}

HTML

<div class="language-dropdown">
  <button class="lang-dropbtn">
    <img class="lang-img" src="英国国旗图片地址" alt="British">
  </button>
  <div class="lang-dropdown-content">
    <a class="lang-a" href="/cn"><img class="lang-img" src="中国国旗图片地址" alt="Chinese"></a>
    <a class="lang-a" href="/ar"><img class="lang-img" src="沙特国旗图片地址" alt="Arabic"></a>
  </div>
</div>

核心修改点总结 #

1. 按钮：移除padding、设置透明背景、固定尺寸，让国旗完全填充圆形按钮，消除白色圆环
2. 下拉容器：用left:50% + translateX(-50%)实现水平居中，确保国旗在主按钮正上方
3. 样式统一：移除内联样式，用CSS统一控制所有国旗尺寸，保持视觉一致性

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