为何flex/block布局中width:100%失效？（PicoCSS汉堡菜单场景）

DevOps 小满

2026-7-13

问题分析与解决方案

为什么`width: 100%`失效？

父元素宽度未占满容器：PicoCSS默认菜单的<li>可能不是块级布局（比如默认是inline-block），或未设置width: 100%，导致子元素<a>的100%宽度仅对应父元素当前宽度，而非全屏。
盒模型计算偏差：若<a>带有默认padding或border，未设置box-sizing: border-box时，width: 100%会将内边距、边框计入总宽度，挤压内容区域，造成视觉上宽度缩小且文本换行。
样式优先级不足：自定义CSS选择器权重低于PicoCSS默认样式，导致width: 100%被覆盖。
布局上下文冲突：父容器用flex/grid布局但未配置子项拉伸规则时，<a>不会自动填满可用空间。

解决步骤

确保父元素<li>占满宽度：给<li>添加样式：

& li {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

修正<a>的盒模型与布局：

& a {
  display: block;
  width: 100%;
  box-sizing: border-box; /* 避免padding/border挤占内容宽度 */
  padding: 0.5em 1em; /* 按需调整内边距，保证点击区域大小 */
  margin: 0;
}

提高样式优先级：若上述样式不生效，使用更具体的选择器，比如：
```
.mobile-menu li a {
  /* 写入目标样式 */
}
```
Flex布局适配：如果父容器是flex布局，用flex: 1替代width: 100%，自动拉伸填满空间：
```
& a {
  display: block;
  flex: 1;
  box-sizing: border-box;
}
```