求助：如何让页面首个ul与div样式匹配参考图？

我编写了包含Media Queries的CSS代码及HTML结构，期望页面中第一个ul及其外层div的样式匹配参考样式（顶部深色背景栏，内部四个导航链接均匀分布）。尝试调整背景尺寸、颜色，设置ul和li的宽度后仍未达到预期效果，求技术支持。

现有代码 #

CSS代码

@media screen and (min-width: 1300px) {
    .container-head {
        margin: 0 auto;
    }

    .hover  ul{
        width: 80%;
        margin: 0 auto;
    }

    .flex {
        width: 80%;
        margin: 0 auto;
    }

    main>div ul li {
        width: 13%;
    }

    .flex section:first-child {
        width: 50%;
    }

    .gray {
        width: 35%;
        margin-bottom: 1rem;
    }

    .margin {
        margin-bottom: 1rem;
    }

    footer {
        display: flex;
        justify-content: space-around;
        margin-top: 1rem;
    }

    footer nav li {
        width: 100%;
    }
}

HTML代码

<header>
    <div class="container-head">
        <div>
                <ul>
                    <li><a href="#">OUTAGE CENTER</a></li>
                    <li><a href="#">PAY YOUR BILL</a></li>
                    <li><a href="#">START, STOP, MOVE SERVICE</a></li>
                    <li><a href="#">CONTACT US</a></li>
                </ul>
        </div>
    </div>
        <div class="wrap">
            <h1>XYZ POWER</h1>
            <nav>
                <ul>
                    <li><a href="index.html">HOME PAGE</a></li>
                    <li><a href="yourhome.html">YOUR HOME</a></li>
                    <li><a href="community.html">COMMUNITY</a></li>
                </ul>
    </nav>
        </div>
</header>

解决方案 #

要匹配参考样式，需要给第一个导航栏添加背景、设置弹性布局让链接均匀分布，具体修改如下：

1. 修改HTML结构（给外层div加类）

<header>
    <div class="container-head">
        <!-- 新增类名方便定位样式 -->
        <div class="top-nav-bar">
                <ul>
                    <li><a href="#">OUTAGE CENTER</a></li>
                    <li><a href="#">PAY YOUR BILL</a></li>
                    <li><a href="#">START, STOP, MOVE SERVICE</a></li>
                    <li><a href="#">CONTACT US</a></li>
                </ul>
        </div>
    </div>
        <div class="wrap">
            <h1>XYZ POWER</h1>
            <nav>
                <ul>
                    <li><a href="index.html">HOME PAGE</a></li>
                    <li><a href="yourhome.html">YOUR HOME</a></li>
                    <li><a href="community.html">COMMUNITY</a></li>
                </ul>
    </nav>
        </div>
</header>

2. 更新CSS代码（添加首栏样式）

@media screen and (min-width: 1300px) {
    /* 新增第一个导航栏的核心样式 */
    .container-head .top-nav-bar {
        background-color: #2d3e50; /* 参考图深色背景，可按需调整 */
        width: 100%;
        padding: 0.6rem 0;
    }

    .container-head .top-nav-bar ul {
        list-style: none;
        padding: 0;
        margin: 0 auto;
        width: 80%; /* 和你原有布局宽度保持一致 */
        display: flex;
        justify-content: space-between; /* 让链接均匀分布 */
    }

    .container-head .top-nav-bar ul li {
        flex: 1; /* 每个li均等分配宽度 */
        text-align: center;
    }

    .container-head .top-nav-bar ul li a {
        color: #fff; /* 白色文字匹配参考图 */
        text-decoration: none;
        display: block;
        padding: 0.4rem 0;
    }

    /* 保留你原有的其他样式 */
    .container-head {
        margin: 0 auto;
    }

    .hover  ul{
        width: 80%;
        margin: 0 auto;
    }

    .flex {
        width: 80%;
        margin: 0 auto;
    }

    main>div ul li {
        width: 13%;
    }

    .flex section:first-child {
        width: 50%;
    }

    .gray {
        width: 35%;
        margin-bottom: 1rem;
    }

    .margin {
        margin-bottom: 1rem;
    }

    footer {
        display: flex;
        justify-content: space-around;
        margin-top: 1rem;
    }

    footer nav li {
        width: 100%;
    }
}

说明 #

之前未达到预期的原因：没有给外层div设置背景色，也未通过flex布局实现导航链接的均匀分布，li宽度设置未配合合适的布局方式。上述修改通过弹性布局让四个li自动均分宽度，同时添加深色背景和白色文字，匹配参考样式的视觉效果。

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