如何实现图标并排显示并保留下拉功能？排查CSS问题

核心问题 #

1. 布局混乱：第一个按钮用了float: right，其他按钮用float: left，混合浮动导致图标无法正常并排，互相挤压。
2. 下拉菜单挤占空间：下拉菜单默认处于文档流中，显示时会撑开容器、挤开其他元素和底部文本，而非实现覆盖效果。

修复步骤 #

1. 统一容器布局，让图标并排

把.header-bar__container改成flex布局，替代浮动逻辑，让内部按钮自动横向排列：

.header-bar__container {
  position: relative;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  max-width: 1152px;
  /* 新增flex布局，统一横向排列 */
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

同时移除按钮上的浮动属性：

.header-bar-mobile-drop-down__icon-button {
  color: black;
  border: none;
  background-color: transparent;
  font-size: 1.5rem;
  /* 移除float: right */
  line-height: 1.5rem;
  cursor: pointer;
}

.header-bar-utility {
  height: 100%;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  /* 移除float: left */
  color: pink;
  background-color: transparent;
  border: none;
  font-size: 16px;
  line-height: 1.5rem;
  text-decoration: none;
  cursor: pointer;
}

2. 让下拉菜单脱离文档流，实现覆盖效果

给下拉菜单的父容器设置相对定位，下拉菜单本身用绝对定位脱离文档流：

.header-bar-mobile-drop-down {
  display: inline;
  /* 新增相对定位，作为下拉的定位基准 */
  position: relative;
}

.header-bar-mobile-drop-down__item {
  visibility: hidden;
  opacity: 0;
  border: 1px solid orange;
  /* 新增绝对定位，脱离文档流不挤占空间 */
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content;
  /* 保留过渡动画 */
  transition: visibility 0.3s, opacity 0.3s;
}

修正下拉显示时的样式，移除不必要的属性：

.header-bar-mobile-drop-down__icon-button:focus + .header-bar-mobile-drop-down__item {
  visibility: visible;
  opacity: 1;
  margin-top: 0; /* 用top:100%控制位置，移除margin-top */
  height: 4.25rem;
  background-color: orange;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

3. 修正HTML语法错误

把两个按钮的:class="header-bar-utility"改成class="header-bar-utility"，否则样式无法生效：

<button class="header-bar-utility">
  <div class="header-bar-utility__icon">🎃 2</div>
</button>

<button class="header-bar-utility">
  <div class="header-bar-utility__icon">🎃 3</div>
</button>

最终效果 #

所有图标（1-4）会横向并排显示，点击第一个图标时，下拉菜单从它下方弹出，覆盖底部文本，不会挤开其他图标或内容。

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