HTML无序列表对齐及红色页眉页脚宽度不匹配问题如何修复

无序列表样式修复 #

按以下步骤调整CSS即可实现需求：

• 给<ul>添加如下样式，实现整体居中、项目符号紧贴文字：

ul {
  /* 宽度和页面主体内容宽度保持一致 */
  max-width: 你主体内容的宽度值;
  margin: 0 auto;
  padding-left: 0;
  /* 项目符号纳入内容流，和文字紧贴对齐 */
  list-style-position: inside;
}

• 给<li>添加如下样式，实现所有列表项对齐、均匀排布：

li {
  /* 按需调整上下间距 */
  padding: 8px 0;
  text-align: left;
}

导航栏、页脚宽度适配修复 #

根据你的实际需求二选一即可：

方案1：导航、页脚整体和主体宽度一致 #

给导航、页脚选择器添加和主体统一的宽度限制，自动居中对齐：

/* 把nav、footer替换为你实际的导航、页脚元素选择器 */
nav, footer {
  max-width: 你主体内容的宽度值;
  margin: 0 auto;
  width: 100%;
}

方案2：导航、页脚背景通栏，内部内容和主体对齐 #

如果需要导航、页脚的红色背景铺满整个页面宽度，仅内部内容和主体对齐，先调整HTML结构：

<!-- 导航结构调整 -->
<nav>
  <div class="content-wrapper">
    <!-- 原有导航内容 -->
  </div>
</nav>

<!-- 页脚结构调整 -->
<footer>
  <div class="content-wrapper">
    <!-- 原有页脚内容 -->
  </div>
</footer>

再添加对应CSS：

nav, footer {
  width: 100%;
  /* 保留你原有红色背景设置 */
}
.content-wrapper {
  max-width: 你主体内容的宽度值;
  margin: 0 auto;
  /* 小屏下避免内容贴边，可按需调整数值 */
  padding: 0 16px;
}

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