如何用HTML和CSS设置两个不同列表样式？导航栏圆点问题求助

嗨，欢迎加入Stack Overflow！别担心，新手遇到这种小问题太正常了😉

你遇到的<ul>导航栏出现项目符号的问题，本质是浏览器给无序列表设置了默认样式，咱们用CSS就能轻松解决，甚至还能把导航栏改成更美观的横向样式，下面给你具体方案：

核心解决方法：去掉列表默认项目符号 #

给导航栏的<ul>添加list-style: none;属性，同时建议重置一下默认的内边距和外边距，避免布局混乱。

完整示例代码（包含导航栏+杂志目录） #

我帮你整理了一套完整的代码，你可以直接参考：

HTML部分

<!-- 导航栏容器 -->
<div class="navbar">
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#magazine">我的杂志</a></li>
    <li><a href="#archive">往期目录</a></li>
    <li><a href="#about">关于我</a></li>
  </ul>
</div>

<!-- 杂志目录容器 -->
<div class="magazine-container">
  <h2>杂志目录</h2>
  <ul>
    <li>卷首语：我的创作初衷</li>
    <li>技术专栏：CSS布局实战技巧</li>
    <li>生活随笔：程序员的日常</li>
    <li>读者互动：你的问题我来答</li>
  </ul>
</div>

CSS部分

/* 导航栏样式 */
.navbar ul {
  list-style: none; /* 关键：去掉项目符号 */
  padding: 0; /* 清除默认内边距 */
  margin: 0; /* 清除默认外边距 */
  background-color: #2c3e50;
  overflow: hidden;
}

.navbar li {
  float: left; /* 让导航项横向排列 */
}

.navbar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 18px;
  text-decoration: none; /* 去掉链接下划线 */
}

.navbar li a:hover {
  background-color: #34495e; /* 鼠标悬停时的背景色变化 */
}

/* 杂志目录样式（保留项目符号，符合目录的阅读习惯） */
.magazine-container {
  margin: 20px;
}

.magazine-container ul {
  padding-left: 25px; /* 调整目录项目符号的缩进 */
  line-height: 1.6; /* 提升行高，增强可读性 */
}

额外说明 #

• 如果你的导航栏不需要横向排列，只需要去掉项目符号的话，只需要给<ul>加上list-style: none; padding: 0;就够了
• 杂志目录我保留了项目符号，这样更符合目录的视觉逻辑，如果不需要也可以同样添加list-style: none;

如果你的原有代码还有其他布局问题，随时贴出来，大家再帮你调整~

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