Display Flex无法实现导航链接横向排列问题求助

原始代码 #

HTML #

<header>
    <nav>
        <div class="logo">
            <img src="your-logo.png" alt="Logo">
        </div>
        <ul class="nav-links">
            <li><a href="#home">Home</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

原始CSS #

header .nav-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row; /* Ensure the direction is horizontal */
}

header .nav-links li {
    margin-right: 20px; /* Add margin to space out the links horizontally */
}

header .nav-links a {
    color: #fff;
    text-decoration: none;
}

问题原因 #

CSS选择器匹配错误：HTML中<ul>本身就带有nav-links类，但你写的header .nav-links ul是在寻找.nav-links元素内部的<ul>，这和实际DOM结构不符，导致Flex布局属性根本没有应用到目标<ul>上，所以导航链接还是保持默认的垂直排列。

修正方案 #

将CSS选择器改为直接匹配带nav-links类的<ul>：

header .nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row; /* 默认值为row，可省略 */
}

header .nav-links li {
    margin-right: 20px; /* 横向间距 */
}

header .nav-links a {
    color: #fff;
    text-decoration: none;
}

补充说明 #

• 给<li>设置inline-block时，是直接作用到了正确的元素上，所以能实现横向排列，但Flex失效完全是选择器指向错误导致的。
• flex-direction: row是Flex容器的默认属性，不需要显式声明，保留也不会有问题。

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