网页底部三列表横向布局问题：子列表项无法垂直排列

你的问题核心出在HTML结构不规范和CSS Flex继承范围过大两点上，以下是具体解决方法：

问题分析 #

1. HTML结构违规：<ul>的直接子元素只能是<li>，你直接在.endpage-titles里嵌套<ul>和<li>，不符合HTML规范，会导致浏览器解析异常。
2. CSS Flex继承问题：你设置了.endpage ul { display: flex; }，这会让所有嵌套在.endpage内的<ul>都应用Flex布局，包括子列表，所以子项会横向排列。

修正方案 #

1. 规范HTML结构 #

每个「标题+子项」的分组需要放在一个<li>中，标题用<h3>标签，子项放在独立的<ul>里，确保结构合法：

<div class="endpage">
  <ul class="endpage-titles">
    <!-- CONTACTS分组 -->
    <li class="footer-group">
      <h3 class="endpage-subtitles">CONTACTS</h3>
      <ul class="footer-links">
        <li><a href="#">link1</a></li>
        <li><a href="#">link2</a></li>
        <li><a href="#">link3</a></li>
      </ul>
    </li>
    <!-- LINKS分组 -->
    <li class="footer-group">
      <h3 class="endpage-subtitles">LINKS</h3>
      <ul class="footer-links">
        <li><a href="#">link1</a></li>
        <li><a href="#">link2</a></li>
      </ul>
    </li>
    <!-- MAPS分组 -->
    <li class="footer-group">
      <h3 class="endpage-subtitles">MAPS</h3>
      <ul class="footer-links">
        <li><a href="#">link1</a></li>
      </ul>
    </li>
  </ul>
</div>

2. 调整CSS样式 #

仅给外层列表设置Flex布局实现横向排列，子列表恢复默认块级布局让子项纵向排列，同时优化视觉样式：

.endpage {
  width: 100%;
  background-color: #333;
  position: fixed;
  height: auto; /* 改为自适应高度，避免内容被截断 */
  bottom: 0;
  padding: 20px 0; /* 增加内边距优化布局 */
}

/* 仅外层列表应用Flex，实现三个分组横向分布 */
.endpage-titles {
  list-style: none;
  display: flex;
  justify-content: space-around; /* 让三个分组均匀分布 */
  padding: 0;
  margin: 0;
}

.footer-group {
  text-align: center; /* 标题和子项居中对齐 */
}

.endpage-subtitles {
  font-family: djr-banner-bold;
  font-size: 28px;
  letter-spacing: 2px;
  text-shadow: 1px 1px #000; /* 修正text-shadow语法，补充垂直偏移值 */
  color: #ffffff;
  margin: 0 0 10px 0; /* 标题与子项间增加间距 */
}

/* 子列表取消Flex，恢复纵向排列 */
.footer-links {
  list-style: none;
  display: block;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin: 5px 0; /* 子项间增加间距 */
}

.footer-links a {
  color: #ffffff;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline; /* 鼠标悬停下划线效果 */
}

关键调整总结 #

• 用<li>包裹每个分组，符合HTML列表嵌套规范。
• 缩小Flex布局的应用范围，只作用于外层列表，避免影响子列表。
• 调整底部容器高度为自适应，补充内边距提升视觉体验。
• 修正text-shadow的语法错误。

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