服务器用户订货网站导航文本消失、分类按钮样式异常修复咨询

问题根因 #

1. 「Navigator文本消失」原因：
   • 导航栏nav设置了justify-content: center，当导航栏内总内容高度超过视口高度时，flex居中布局会把上下部分内容挤出可视区域，顶部的Navigator文本就会被挤到视口外不可见
   • 滚动条隐藏规则写错了选择器：.nav::-webkit-scrollbar对应的是类名为nav的元素，而你的导航是<nav>标签，选择器不匹配导致滚动条没隐藏，也影响内容展示
2. 「分类按钮样式不一致」原因：
   • 其中Armors & Weapons按钮用的ArmorsWeapon类没有在CSS中定义对应的样式，导致该按钮padding和其他分类按钮不一致
   • 为不同按钮单独设置固定左右padding的方案本身不稳定，不同文字长度的按钮宽度会不一致

修复方案 #

CSS修改点 #

1. 给nav元素添加justify-content: flex-start + 上下内边距，替换原来的justify-content: center，避免内容溢出
2. 修正滚动条隐藏的选择器为nav::-webkit-scrollbar，同时把display: hidden改成标准的display: none
3. 新增通用按钮类统一所有按钮样式，不用为每个按钮单独写padding配置
4. 补充默认边距清零和标签兼容性修复

完整修复后代码 #

.title {
  color: #66d4ff;
  background-color: #444444;
  font-size: 62px;
  text-align: center;
  border: solid 10px #66d4ff;
  padding: 50px;
  margin-left: 302px;
}

body {
  background: #444444;
  margin: 0; /* 补充默认边距清零 */
}

button {
  color: #66d4ff;
  background: #444444;
  font-size: 30px;
  font-family: 'Times New Roman', Times, serif;
}

a {
  color: #66d4ff
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  background: #4a4a4a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 改成顶部对齐避免内容溢出 */
  padding: 30px 0; /* 添加上下内边距，内容不会贴顶 */
  border-right: solid 2px #ffffff;
  overflow-y: auto; /* 内容不足时不显示滚动条，超出才显示 */
}

/* 修正滚动条选择器和属性 */
nav::-webkit-scrollbar {
  display: none;
}

main {
  color: #66d4ff;
  background-color: #444444;
  font-size: 20px;
}

.navigator {
  display: block;
  margin: 25px 0 50px 0;
  color: #66d4ff;
  font-size: 35px;
  text-align: center;
}

/* 新增通用按钮类，所有按钮统一用这个，不用单独配置 */
.nav-btn {
  display: block;
  width: 240px; /* 固定按钮宽度，所有按钮一样宽 */
  padding: 0;
  margin: 25px auto;
  text-align: center;
}

<main>
  <div class="title">
    <h1>MineGlobe | IchorDragon's Store</h1> <!-- 把不存在的t1标签改成标准h1 -->
  </div>
</main>

<nav>
  <div id="navigator">
    <p class="navigator">Navigator</p>
    <div>
      <button class="nav-btn"><a href="store.html" style="text-decoration: none;">Back</a></button>
      <button class="nav-btn"><a href="prices.html" style="text-decoration: none;">Prices</a></button>
    </div>
  </div>

  <div id="category">
    <p class="navigator">Select Category</p>
    <div>
      <button class="nav-btn" onclick="document.getElementById('Woods').scrollIntoView();"><a style="text-decoration: none;">Woods</a></button>
      <button class="nav-btn" onclick="document.getElementById('Stones').scrollIntoView();"><a style="text-decoration: none;">Stones</a></button>
      <button class="nav-btn" onclick="document.getElementById('ArmorsWeapon').scrollIntoView();"><a style="text-decoration: none;">Armors & Weapons</a></button>
      <button class="nav-btn" onclick="document.getElementById('Brewing').scrollIntoView();"><a style="text-decoration: none;">Brewing</a></button>
      <button class="nav-btn" onclick="document.getElementById('Enchanting').scrollIntoView();"><a style="text-decoration: none;">Enchanting</a></button>
      <button class="nav-btn" onclick="document.getElementById('Color').scrollIntoView();"><a style="text-decoration: none;">Color</a></button>
      <button class="nav-btn" onclick="document.getElementById('Redstone').scrollIntoView();"><a style="text-decoration: none;">Redstone</a></button>
      <button class="nav-btn" onclick="document.getElementById('Nether').scrollIntoView();"><a style="text-decoration: none;">Nether</a></button>
    </div>
  </div>
</nav>

额外优化说明 #

• 用固定宽度的通用按钮类代替单独给每个按钮写padding，所有按钮样式完全统一，后续新增按钮也不用额外写CSS
• 滚动条显示逻辑优化为内容超出才显示，提升交互体验

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