您在
我正在尝试在HTML/CSS中制作一个简单的导航栏，并且我正在遵循youtube教程。我按照确切的步骤操作，但由于某种原因，显示器弯曲不起作用。
网页代码：
<!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%;
}
这是我的输出
您在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%;
}
代码笔：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