将导航栏按钮填充到容器的宽度

Question

我正在尝试仅使用 HTML 和 CSS 学习导航栏和下拉菜单，但我遇到了一个问题，我无法将按钮填充到 container。我尝试使用 flexbox 但不知何故不起作用。这是代码：

body {
    background-color: #D4D4D4;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 26px;
    color: #666;
    margin: 0;
}

.reset {
    clear: both;
}

.navigation {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: rgb(58, 58, 58);
    border-top: 3px solid #FFF;
    box-shadow: 0px 11px 21px 0px rgba(0,0,0,0.59);
}

.navigation li {
    float: left;
}

.navigation li:hover {
    background-color: #222;
}

.navigation li:first-child {
    border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -ms-border-radius: 5px 5px 0 0;
    -o-border-radius: 5px 5px 0 0;
}

.navigation li a {
    display: block;
    padding: 0 20px;
    text-decoration: none;
    line-height: 40px;
    color: #FFF;
}

.navigation ul {
    display: none;
    position: absolute;
    list-style: none;
    margin-left: -3px;
    padding: 0;
    overflow: hidden;
}

.navigation ul li {
    float: none;
}

.navigation li:hover > ul li:hover {
    border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -ms-border-radius: 0 0 5px 5px;
    -o-border-radius: 0 0 5px 5px;
}

.navigation li li a:hover {
    background-color: #000;
}

.navigation ul li:last-child a,
.navigation ul li:last-child a:hover {
    border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -ms-border-radius: 0 0 5px 5px;
    -o-border-radius: 0 0 5px 5px;
}

.navigation li:hover {
    border-bottom: 2px solid dodgerblue;
}

.navigation li {
    border-bottom: 2px solid transparent;
}

@media screen and (min-width: 1281px) {
    .submenu::after {
        content: " +";
    }
    
    .navigation li:hover .submenu::after {
        content: " –";
    }

    .navigation li:hover > ul {
        display: block;
        background-color: #222;
        border: 3px solid #FFF;
        border-top: 0;
        border-radius: 0 0 8px 8px;
        -webkit-border-radius: 0 0 8px 8px;
        -moz-border-radius: 0 0 8px 8px;
        -ms-border-radius: 0 0 8px 8px;
        -o-border-radius: 0 0 8px 8px;
        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/navbar.css">
    <title>My Website</title>
</head>
<body>
    <div id="container">
        <!-- HEADER -->
        <header>
            <ul class="navigation">
                <li><a href="./index.html">HOME</a></li>
                <li><a class="submenu" href="#">DROPDOWN 1</a>
                    <ul>
                        <li><a href="#">PLACEHOLDER 1</a></li>
                        <li><a href="#">PLACEHOLDER 2</a></li>
                        <li><a href="#">PLACEHOLDER 3</a></li>
                    </ul>
                </li>
                <li><a class="submenu" href="#">DROPDOWN 2</a>
                    <ul>
                        <li><a href="#">PLACEHOLDER 1</a></li>
                        <li><a href="#">PLACEHOLDER 2</a></li>
                        <li><a href="#">PLACEHOLDER 3</a></li>
                    </ul>
                </li>
                <li><a href="#">LINK 1</a></li>
                <li><a href="#">LINK 2</a></li>
                <li><a href="#">LINK 3</a></li>
                <div class="reset"></div>
            </ul>
        </header>
    </div>
</body>
</html>

Answer 1

试试这个代码：

body {
    background-color: #D4D4D4;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 26px;
    color: #666;
    margin: 0;
}

.reset {
    clear: both;
}

.navigation {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: rgb(58, 58, 58);
    border-top: 3px solid #FFF;
    box-shadow: 0px 11px 21px 0px rgba(0,0,0,0.59);
  display: flex;
}

.navigation li {
    flex: 1 0 auto;
}

.navigation li:hover {
    background-color: #222;
}

.navigation li:first-child {
    border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -ms-border-radius: 5px 5px 0 0;
    -o-border-radius: 5px 5px 0 0;
}

.navigation li a {
    display: block;
    padding: 0 5px;
    text-decoration: none;
    line-height: 40px;
    color: #FFF;
}

.navigation ul {
    display: none;
    position: absolute;
    list-style: none;
    margin-left: -3px;
    padding: 0;
    overflow: hidden;
}

.navigation ul li {
    float: none;
}

.navigation li:hover > ul li:hover {
    border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -ms-border-radius: 0 0 5px 5px;
    -o-border-radius: 0 0 5px 5px;
}

.navigation li li a:hover {
    background-color: #000;
}

.navigation ul li:last-child a,
.navigation ul li:last-child a:hover {
    border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -ms-border-radius: 0 0 5px 5px;
    -o-border-radius: 0 0 5px 5px;
}

.navigation li:hover {
    border-bottom: 2px solid dodgerblue;
}

.navigation li {
    border-bottom: 2px solid transparent;
}

@media screen and (min-width: 1281px) {
    .submenu::after {
        content: " +";
    }

    .navigation li:hover .submenu::after {
        content: " –";
    }

    .navigation li:hover > ul {
        display: block;
        background-color: #222;
        border: 3px solid #FFF;
        border-top: 0;
        border-radius: 0 0 8px 8px;
        -webkit-border-radius: 0 0 8px 8px;
        -moz-border-radius: 0 0 8px 8px;
        -ms-border-radius: 0 0 8px 8px;
        -o-border-radius: 0 0 8px 8px;
        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
    }
}

<div id="container">
        <!-- HEADER -->
        <header>
            <ul class="navigation">
                <li><a href="./index.html">HOME</a></li>
                <li><a class="submenu" href="#">DROPDOWN 1</a>
                    <ul>
                        <li><a href="#">PLACEHOLDER 1</a></li>
                        <li><a href="#">PLACEHOLDER 2</a></li>
                        <li><a href="#">PLACEHOLDER 3</a></li>
                    </ul>
                </li>
                <li><a class="submenu" href="#">DROPDOWN 2</a>
                    <ul>
                        <li><a href="#">PLACEHOLDER 1</a></li>
                        <li><a href="#">PLACEHOLDER 2</a></li>
                        <li><a href="#">PLACEHOLDER 3</a></li>
                    </ul>
                </li>
                <li><a href="#">LINK 1</a></li>
                <li><a href="#">LINK 2</a></li>
                <li><a href="#">LINK 3</a></li>
                <div class="reset"></div>
            </ul>
        </header>
    </div>

将导航栏按钮填充到容器的宽度

Fill navbar buttons to width of a container

html

css

navigation