如何让无序列表左对齐？CSS导航菜单左侧缩进问题求助

核心问题分析 #

1. HTML结构无效：ul的直接子元素只能是li，你代码中存在ul.tabbies直接嵌套ul.tabbies的错误结构，浏览器自动修正后会产生额外缩进。
2. CSS语法错误：justify-content(flex-start)和align-items(stretch)是错误写法，正确应为冒号赋值。
3. 布局属性冲突：ul.tabbies设置margin: auto会让元素水平居中，无法左对齐；全局ul, li的padding、align-self等属性污染了导航菜单布局。

修复后的代码 #

HTML代码 #

<ul class="tabbies">
    <li><a href="https://www.l-a-m.org/pages/associate-only-rides">Rides</a></li>
    <li><a class="active" href="https://www.l-a-m.org/pages/banstead">Locations</a></li>
    <li><a href="https://www.l-a-m.org/pages/norfolk">Training Weekends</a></li>
    <li><a href="https://www.l-a-m.org/pages/local-observer">Observers</a></li>
</ul>
<ul class="tabbies">
    <li><a class="active" href="https://www.l-a-m.org/pages/banstead">Banstead</a></li>
    <li><a href="https://www.l-a-m.org/pages/tatsfield">Tatsfield</a></li>
</ul>

CSS代码 #

/* 全局列表样式，隔离导航菜单 */
ul:not(.tabbies),
li:not(.tabbies li) {
  list-style-type: disc;
  text-align: left;
  padding-inline-start: 0;
  min-width: fit-content;
  color: #363535;
}

li:not(.tabbies li):hover {
  color: #363535;
  border-bottom: transparent 1px !important;
}

/* 导航菜单样式 */
ul.tabbies {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  margin: 0; /* 取消居中，实现左对齐 */
  text-align: left;
  text-transform: uppercase;
  justify-content: flex-start; /* 修正语法错误 */
  align-items: stretch; /* 修正语法错误 */
  color: #363535;
  padding-inline-start: 0; /* 清除默认左侧内边距 */
}

.tabbies .active {
  color: #c70000;
  text-transform: uppercase;
}

.tabbies li {
  text-align: left;
  text-transform: uppercase;
  list-style: none;
  margin-right: 2em; /* 控制菜单项间距 */
  padding-top: 1em;
}

.tabbies li a {
  text-decoration: none;
  text-align: left;
  color: #363535;
}

.tabbies li:hover {
  color: #c70000;
  text-transform: uppercase;
  border-bottom: solid #000 1px !important;
}

关键修复说明 #

• 移除无效嵌套：删除外层多余的ul.tabbies，确保ul的直接子元素只有li。
• 修正CSS语法：将括号改为冒号，确保flex布局属性生效。
• 强制左对齐：把margin: auto改为margin: 0，配合padding-inline-start: 0清除默认缩进。
• 样式隔离：用:not()选择器区分全局列表和导航菜单，避免样式互相干扰。
• 调整间距逻辑：将全局padding移到导航菜单项的margin，精准控制间距。

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