即使在 Firefox 和 Chrome 中添加显示 webkits 后，显示 flex 也无法工作答案

【问题标题】：Display flex not working even after adding display webkits in both Firefox and Chrome即使在 Firefox 和 Chrome 中添加显示 webkits 后，显示 flex 也无法工作
【发布时间】：2021-04-20 10:59:21
【问题描述】：

我正在尝试用 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

【问题讨论】：

标签： html css flexbox display

【解决方案1】：

您在`header` 上使用`flex`，它只有一个孩子，即`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%;
}

Codepen：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%;
}

Codepen：https://codepen.io/manaskhandelwal1/pen/VwKqLaq

【讨论】：

谢谢！在 youtube 教程中，他将 flexbox 应用于标题。它现在正在工作。
@ravuripraneeth 没问题，如果您需要任何帮助，请发送邮件至 mkdpsj@gmail.com。 ?✌

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

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