导航栏a锚点超出ul宽度 安卓端padding设置致宽度适配异常

• 样式语法错误：.navi li a选择器下的margin: 15未写单位，属于非法CSS值，浏览器会直接丢弃该条规则，引发布局计算异常。
• 盒模型默认行为问题：浏览器默认使用content-box盒模型，内边距padding会被算在元素设定宽度之外，给锚点加大尺寸padding后，元素实际占用宽度会超出预期。
• Flex布局默认约束缺失：<ul>设置为flex容器后，默认flex-wrap: nowrap（所有子项不换行），且flex子项（<li>）默认min-width: auto，即最小宽度不能小于内部内容宽度，安卓设备屏幕宽度较小时，总内容宽度超过父容器宽度就会直接溢出。
• 样式冲突：.navi同时设置了float: right和margin-left: auto; margin-right: auto，浮动生效时左右auto外边距会失效，导致导航定位逻辑混乱。

1. 全局统一盒模型为border-box，让内边距、边框都计入元素总宽度内，从根源避免padding撑大容器的问题。
2. 修复非法CSS值，给margin属性补充单位，同时清理冲突的定位样式。
3. 给flex容器补充宽度约束，设置flex子项的收缩规则，小屏下自动适配宽度，可通过媒体查询调小移动端的padding值，进一步节省空间。
4. 让锚点在li内部撑满，保留大点击区域的同时不会超出父元素范围。

仅需替换原有CSS部分即可，JS和HTML结构无需改动：

/* 全局统一盒模型，建议放在CSS文件最开头 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.navi {
  /* 去掉和float冲突的auto margin，要靠右保留float即可，要居中就删掉float加margin:0 auto */
  float: right;
  /* 约束导航最大宽度，避免无限溢出 */
  max-width: 100%;
}

.navi ul {
  background-color: #212121;
  list-style: none;
  display: flex;
  /* 小屏自动换行，若要单行显示可删掉该行，配合媒体查询缩小padding即可 */
  flex-wrap: wrap;
  width: 100%;
}

.navi li {
  /* 让导航项自动分配宽度、允许收缩 */
  flex: 1 1 auto;
  text-align: center;
}

.navi li a {
  /* 修复无单位的语法错误，上下15px外边距，可按需调整数值 */
  margin: 15px 0;
  display: block;
  /* 移动端左右padding适当收窄避免拥挤，大屏通过媒体查询恢复大padding */
  padding: 25px 12px;
  position: relative;
}

.navi a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

/* 可选：大屏设备适配，恢复原padding尺寸 */
@media (min-width: 768px) {
  .navi li a {
    padding: 25px;
  }
}

当前JS中绑定的mouseenter/mouseleave是鼠标专属事件，安卓等触屏设备不会触发，如果需要适配触屏交互，建议替换为touchstart/touchend事件，或直接用CSS:hover伪类实现样式切换。

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