使用<ul>制作侧边菜单时<a>链接无法跳转的问题求助

问题说明 #

制作学校项目的波兰语页面时，用<ul>实现侧边菜单，添加CSS后<a>标签无法跳转至指定href页面；移除CSS后链接功能正常，但页面样式混乱。尝试将<a>设为按钮样式仍无效，且链接本身是有效的。

代码问题排查及修复方案 #

1. HTML标签语法错误 #

你的HTML中<li>标签未闭合，会导致浏览器解析异常，直接影响布局和交互：

<!-- 错误写法 -->
<li><a href="bocz1.html">Pow</a>
<li><a href="bocz2.html">Powrót do strony głównej</a>
<li><a href="bocz3.html">Powrótony głównej</a>

<!-- 修复后 -->
<li><a href="bocz1.html">Pow</a></li>
<li><a href="bocz2.html">Powrót do strony głównej</a></li>
<li><a href="bocz3.html">Powrótony głównej</a></li>

2. CSS关键错误修正 #

• aside宽度设置无效：width: 2缺少单位，浏览器无法识别，导致侧边栏宽度异常，可能挤压或遮挡链接。修改为带单位的宽度：

aside {
  min-height: 110vh;
  background-color: #666;
  color: #fff;
  width: 200px; /* 添加单位，可根据需求调整 */
  float: left;
  padding: 30px;
}

• 自定义<content>标签样式冲突：<content>不是HTML标准标签，默认是行内元素，重复定义的样式会引发布局混乱。建议替换为标准的<main>标签，并统一样式：

main {
  flex-grow: 1;
  padding: 20px;
  margin-left: 260px; /* 对应aside的width+左右padding，避免重叠覆盖 */
  min-height: 100vh;
}

• 避免元素覆盖链接：如果main（原content）的margin-left设置不当，可能覆盖侧边栏的链接区域。调整margin-left值等于侧边栏总宽度，同时给aside添加层级确保点击优先级：

aside {
  /* 保留原有样式 */
  position: relative;
  z-index: 1;
}

3. 优化链接点击体验 #

给<a>标签设置块级显示，扩大点击范围，同时增强交互反馈：

aside ul li a {
  display: block;
  padding: 10px;
  border-radius: 4px;
  transition: background-color 0.2s;
}
aside ul li a:hover {
  background-color: #555;
}

修复后完整代码示例 #

HTML #

<header>
  <img src="zdjecia/diablologo.png" alt="Diablo Logo">
</header>
<aside>
  <ul>
    <li><a href="bocz1.html">Pow</a></li>
    <li><a href="bocz2.html">Powrót do strony głównej</a></li>
    <li><a href="bocz3.html">Powrótony głównej</a></li>
  </ul>
</aside>
<main>
  <!-- 页面内容区域 -->
</main>
<footer>
  <!-- 页脚内容 -->
</footer>

CSS #

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

header img {
  width: 350px;
  height: auto;
}

aside {
  min-height: calc(100vh - 60px); /* 减去header和footer高度 */
  background-color: #666;
  color: #fff;
  width: 200px;
  padding: 30px;
  position: relative;
  z-index: 1;
}

aside ul {
  list-style-type: none;
  padding: 0;
}

aside ul li {
  text-align: center;
  margin-bottom: 30px;
}

aside ul li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: white;
  border-radius: 4px;
  transition: background-color 0.2s;
}

aside ul li a:hover {
  background-color: #555;
}

main {
  flex-grow: 1;
  padding: 20px;
  margin-left: 260px; /* 200px(width) + 30px*2(padding) */
}

footer {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}

p {
  text-align: justify;
}

h3 {
  font-size: x-large;
}

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