即使在 Firefox 和 Chrome 中添加显示 webkit 后，显示 flex 也无法正常工作

Question

我正在尝试在 HTML/CSS 中制作一个简单的导航栏，并且我正在关注 youtube 教程。我遵循了确切的步骤，但出于某种原因，显示 flex 无法正常工作。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IEEE GRIET SB</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <header>
        <nav>
            <ul class="nav_links">
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Societies</a></li>
                <li><a href="#">Exe - Com</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Pragnya</a></li>
                <li><a href="#">Laurels</a></li>
                <li><a href="#">Resources</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

CSS代码：

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap');

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

li,a{
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 20px;
    text-decoration: none;
}

header{
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: 30px 10%;
}

This is my output

Answer 1

您在 `header` 上使用 `flex`，它只有一个 child，即 `nav`。

在 ul

上使用 display flex

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap');

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

li,a{
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 20px;
    text-decoration: none;
}

ul {
    display: flex;
    justify-content:space-between;
    align-items:center;
}

header{
    padding: 30px 10%;
}

代码笔：https://codepen.io/manaskhandelwal1/pen/qBaLday

或在 li 上使用 display inline。

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

li,
a {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 20px;
  text-decoration: none;
  display: inline;
}

header {
  padding: 30px 10%;
}

代码笔：https://codepen.io/manaskhandelwal1/pen/VwKqLaq

即使在 Firefox 和 Chrome 中添加显示 webkit 后，显示 flex 也无法正常工作

Display flex not working even after adding display webkits in both Firefox and Chrome

html

css

flexbox

display

您在 header 上使用 flex，它只有一个 child，即 nav。

您在 `header` 上使用 `flex`，它只有一个 child，即 `nav`。