如何解决hover菜单项时信息图标掉落到下一行的问题

问题根源 #

你的布局出现换行是两个原因共同导致的：

1. .menu-button 设置了固定宽度 193px，刚好占满父级 .menu-item 的全部宽度，后续的 .info 元素没有剩余横向空间可以放置
2. .info 是块级元素，默认占满整行宽度，即使加了右浮动，父容器宽度不足的情况下依然会自动换行

可行解决方案 #

采用 Flex 布局重构菜单项内部排列，修改成本最低，兼容性也足够：

第一步：修改CSS

/* 新增menu-item的flex布局规则 */
.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 193px;
  height: 42px;
  padding: 0 8px;
  box-sizing: border-box;
}

/* 修改menu-button的宽度，不要占满整行 */
.menu-button {
  width: auto; /* 替换原来的width: 193px */
  padding: 0; /* 已经把padding挪到父级menu-item了，这里可以去掉 */
  /* 其他原有属性保留不变 */
}

/* 修改info的样式，去掉浮动 */
.info {
  float: none; /* 删除原来的float: right */
  margin: 0; /* 已经通过flex垂直居中，不需要margin-top控制位置 */
  /* 其他原有属性保留不变 */
}

/* 修正selected的pointer-events规则，避免info图标也无法触发点击和hover */
.selected {
  /* 把原来写在selected下的pointer-events: none删掉，挪到下面的子规则里 */
}
.selected .menu-button {
  pointer-events: none; /* 只禁止按钮点击，不影响info图标操作 */
}

第二步：修正HTML小问题

div不是自闭合标签，修改info元素的写法避免浏览器解析异常：

<div class="wrapper">
  <div class="menu-item selected">
    <button class="menu-button" @click="select()">
      <span>Menu item</span>
    </button>
    <!-- 把自闭合的div改成正常闭合格式 -->
    <div class="info" @click="selectInfo()"></div>
  </div>
</div>

修改完成后hover菜单项时，info图标会和菜单文本在同一行右侧显示，不会出现换行问题。

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