HTML&CSS实现左侧导航栏菜单项左对齐问题排查

当前效果：

期望效果：

页面左侧设置了导航栏，但菜单项无法左对齐，参照网上方法配置后仍未生效，求分析解决。

我的代码 #

CSS 代码 #

.lkNavbarDiv { 
  height: 100%; 
  position: relative; 
  float: left; 
  width: 20%; 
  max-width: 200px; 
  display: block; 
  z-index: 2; 
  background-color: #E7E9EB; 
  overflow-y: auto; 
  overflow-x: hidden;
} 

ul { 
  list-style-type: none;
} 

.lkNavbar { 
  display: flex; 
  padding: 20px 0; 
  margin: 2px 0; 
  width: 100%; 
  height: 100%; 
  text-align: left; 
  align-items: flex-start;
} 

.lkNavbar.active { 
  background-color: #C9CBCD; 
  border-left: solid #909193;
} 

HTML 代码 #

<div class="lkNavbarDiv">
  <ul class="">
    <li class="lkNavbar">
      <a href="/leerkracht/overzicht">
        Dashboard
      </a>
    </li>
    <li class="lkNavbar">
      <a href="/leerkracht/leerlingen">
        Leerlingen
      </a>
    </li>
    <li class="lkNavbar">
      <a href="/leerkracht/bibliotheek">
        Bilbiotheek
      </a>
    </li>
    <li class="lkNavbar">
      <a href="/leerkracht/verander-wachtwoord">
        verander wachtwoord
      </a>
    </li>
    <li class="lkNavbar active">
      <a href="/beheer/gebruikers-beheren">
        gebruikers beheren
      </a>
    </li>
    <li class="lkNavbar">
      <a href="/beheer/gebruiker-toevoegen">
        gebruiker toevoegen
      </a>
    </li>
    <li class="lkNavbar">
      <a href="/beheer/boeken-beheren">
        boeken beheren
      </a>
    </li>
    <li class="lkNavbar">
      <a href="/beheer/boek-toevoegen">
        boek toevoegen
      </a>
    </li>
  </ul>
</div>

问题分析与解决 #

问题根源在于两处默认样式和配置遗漏：

1. 浏览器默认给<ul>标签设置了padding-left，导致整个列表向右偏移，无法贴合导航栏左侧
2. .lkNavbar仅设置了上下内边距，没有左侧内边距，即使偏移解决后文字也会紧贴边框，不符合期望效果

修改后的CSS代码 #

.lkNavbarDiv { 
  height: 100%; 
  position: relative; 
  float: left; 
  width: 20%; 
  max-width: 200px; 
  display: block; 
  z-index: 2; 
  background-color: #E7E9EB; 
  overflow-y: auto; 
  overflow-x: hidden;
} 

ul { 
  list-style-type: none;
  padding-left: 0; /* 清除ul默认左内边距 */
} 

.lkNavbar { 
  display: flex; 
  padding: 20px 15px; /* 添加左侧内边距，保证文字与边框间距 */
  margin: 2px 0; 
  width: 100%; 
  height: 100%; 
  text-align: left; 
  align-items: flex-start;
  box-sizing: border-box; /* 防止padding撑宽元素，避免横向溢出 */
} 

.lkNavbar.active { 
  background-color: #C9CBCD; 
  border-left: solid #909193;
} 

关键修改说明 #

• padding-left: 0：移除ul的默认左内边距，让列表整体左对齐到导航栏容器
• padding: 20px 15px：给菜单项添加左右内边距，既保证文字不紧贴边框，又维持左对齐效果
• box-sizing: border-box：确保padding不会使菜单项宽度超出容器，避免出现横向滚动条

内容的提问来源于stack exchange，提问作者Wout Van den Bossche