box-sizing下水平菜单Div右侧边框缺失及换行问题求助

问题根源分析 #

1. border属性写法错误：你写的border: dashed $color-button-passive; 1px;顺序不符合CSS规范，正确顺序应为「宽度→样式→颜色」，顺序错误会导致样式解析异常。
2. 宽度设置不合理：给水平菜单的子Div设置width:100%会让单个元素占满容器宽度，必然导致换行；同时100%宽度加边框后，元素实际尺寸会超出容器，可能被截断隐藏右侧边框。
3. 边框重叠：相邻Div的边框叠加后，视觉上会出现其中一侧边框被覆盖的情况。

具体修复方案 #

1. 修正border属性写法

box-sizing: border-box;
/* 调整为标准顺序：宽度、样式、颜色 */
border: 1px dashed $color-button-passive;

2. 用Flex布局实现水平排列并避免换行

给菜单的父容器添加Flex布局：

.menu-container {
  display: flex;
  flex-wrap: nowrap; /* 强制子项不换行 */
}

3. 调整子Div宽度，适配水平布局

将子Div的width:100%替换为flex:1，让所有子项平分容器宽度：

.menu-item {
  box-sizing: border-box;
  border: 1px dashed $color-button-passive;
  flex: 1; /* 子项自动平分容器宽度 */
}

4. 解决边框重叠问题

可选两种方案：

• 方案一：移除最后一个子项的右侧边框

.menu-item:last-child {
  border-right: none;
}

• 方案二：用负margin抵消边框重叠

.menu-item {
  box-sizing: border-box;
  border: 1px dashed $color-button-passive;
  flex: 1;
  margin-right: -1px; /* 抵消右侧边框的宽度 */
}

.menu-container {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden; /* 防止边框溢出容器 */
}

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