如何拉伸并居中无序列表？nav中ul占66%宽度失效问题咨询

看来你是因为一开始用固定分辨率开发，没做好响应式适配才踩了这个坑。别担心，用CSS的Flexbox布局就能轻松搞定——既能让nav里的ul稳定占据页面66%宽度并居中，又能让内部的li元素随页面拉伸自动调整宽度，完美保持布局比例。

步骤1：先梳理标准HTML结构 #

确保你的基础结构是规范的nav嵌套ul和li：

<nav>
  <ul>
    <li><a href="#">菜单选项1</a></li>
    <li><a href="#">菜单选项2</a></li>
    <li><a href="#">菜单选项3</a></li>
    <li><a href="#">菜单选项4</a></li>
    <li><a href="#">菜单选项5</a></li>
    <li><a href="#">菜单选项6</a></li>
  </ul>
</nav>

步骤2：核心CSS实现响应式效果 #

关键是给ul设置百分比宽度+居中，再用Flexbox让li自动分配空间：

/* 先重置浏览器默认样式，避免自带margin/padding干扰布局 */
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  
  /* 核心需求：占页面66%宽度，左右auto实现水平居中 */
  width: 66%;
  margin: 0 auto;
  
  /* 用Flexbox让li横向排列并自动适配宽度 */
  display: flex;
  gap: 0; /* 如果需要li之间保留间距，可以设置具体数值，比如10px */
}

/* 让每个li平分ul的宽度，拉伸时自动缩放 */
nav ul li {
  flex: 1; /* 每个li占比相等，自动填充ul的宽度 */
  text-align: center; /* 文字居中，优化视觉体验 */
}

/* 可选：给a标签设置块级样式，扩大点击区域 */
nav ul li a {
  display: block;
  padding: 12px 0;
  text-decoration: none;
  color: #333;
}

如果需要自定义li宽度 #

要是不想让所有li平分宽度，想给特定li设置不同比例，比如第一个li占20%，其余占16%，可以这样调整：

/* 方式1：用flex比例分配 */
nav ul li:nth-child(1) {
  flex: 2; /* 占2份权重 */
}
nav ul li:nth-child(n+2) {
  flex: 1.6; /* 其余占1.6份权重，总比例2+1.6*5=10，对应20%和16% */
}

/* 方式2：直接用百分比（更直观） */
nav ul li:nth-child(1) {
  width: 20%;
}
nav ul li:nth-child(n+2) {
  width: 16%;
}

避坑提醒 #

• 绝对要删掉之前给ul或li设置的固定px宽度，这是拉伸时比例丢失的核心原因；
• 测试时直接拉伸浏览器窗口，就能看到ul始终稳定在页面66%宽度，li也会跟着自动调整尺寸。

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