HTML嵌套列表导航布局问题：外层列表无法横向排列求助

我刚接触HTML和CSS，尝试创建一个带嵌套列表的nav导航块，想要实现外层列表横向排列、内层列表纵向堆叠的布局，但实际外层列表是纵向排列的，麻烦帮忙排查代码问题。

原HTML代码 #

<footer>
    <nav id="bottom">
        <ul>
            <li>
                <ul>
                    <li><a href="mailto:myemail@gmail.com"><img id="emailIcon" src="./images/emailIcon.png" width="50" alt="email icon"/></a></li>
                    <li><a href="mailto:myemail@gmail.com">Email me</a></li>
                </ul>
            </li>
            <li>
                <ul>
                    <li><a href="www.linkedin.com/in"><img id="linkedin" src="./images/linkedInIcon.png" width="50" alt="linked in icon" /></a></li>
                    <li><a href="www.linkedin.com/in">My Linkedin Page</a></li>
                </ul>
            </li>
            <li>
                <ul>
                    <li><a href="tel:+1number"><img id="phoneIcon" src="./images/phoneIcon.png" width="50" alt="Phone Icon"></a></li>
                    <li><a href="tel:+1number">Call Me</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</footer>

原CSS代码 #

nav a {
    text-decoration: none;
} 

nav#bottom {
    background-color: rgb(27, 72, 220);
    color: rgb(211, 211, 212);
    padding: 15px;
}

nav#bottom ul {
    list-style: none;
    list-style-type: none;
    list-style-image: none;
    flex: 0 1 150px;
    align-items: center;
}

nav#bottom ul > li {
    font-size: 1em;
    line-height: 1.8em;
    list-style-type: none;
    list-style: none;
    display: inline;
    align-items: center;
 }

nav#bottom ul > li > ul > li{
    display:flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
 }
 
nav#bottom ul a {
    color: white;
    text-decoration: none;
 }

问题分析 #

核心问题在于外层列表的布局未正确启用flex：

1. 外层ul添加了flex属性，但没有声明display: flex，flex布局的容器必须通过display:flex才能激活，否则所有flex相关属性无效，外层li默认还是块级元素纵向排列。
2. 外层li使用display: inline不合适，inline元素无法承载复杂的内部布局，也不能很好地配合flex容器的排列规则。

修复后的CSS代码 #

nav a {
    text-decoration: none;
} 

nav#bottom {
    background-color: rgb(27, 72, 220);
    color: rgb(211, 211, 212);
    padding: 15px;
}

/* 关键修改：给外层ul开启flex布局，让子元素横向排列 */
nav#bottom > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2rem; /* 给外层li之间添加间距，优化布局 */
    justify-content: center; /* 让整体导航居中 */
    align-items: center;
}

nav#bottom ul > li {
    font-size: 1em;
    line-height: 1.8em;
    list-style-type: none;
}

/* 修改内层ul为flex容器，实现纵向堆叠 */
nav#bottom ul > li > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

nav#bottom ul a {
    color: white;
    text-decoration: none;
}

修复说明 #

• 给最外层的nav#bottom > ul添加display: flex，直接开启横向排列布局，同时用gap控制外层li之间的间距，justify-content: center让导航整体居中。
• 内层ul改为flex容器并设置flex-direction: column，确保图标和文字纵向堆叠且居中对齐，替代原代码中给内层li加flex的不合理设置。
• 移除冗余的样式声明（重复的list-style、无效的align-items等），精简代码结构。

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