我对CSS相当陌生。我在youtube上遵循一个指南，视频中的代码似乎有效，但尽管我尽了最大努力，我还是无法在容器上显示：flex函数，以便水平对齐我的元素。我尽可能地将它们水平放置。如有帮助，不胜感激。
这是我的HTML和CSS代码：
Here is my CSS:
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
/*Global configuration. Setting box sizing border-box to included padding and margin in the element size.*/
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Lato', sans-serif;
color: #333;
line-height: 1.6;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: #333;
}
h1, h2 {
font-weight: 300;
line-height: 1.2;
margin: 10px 0;
}
p {
margin: 10px 0;
}
img {
width: 100%; /*Restrain image size to be equal to container size*/
}
.navbar {
background-color: #047aed;
color: #fff;
height: 70px;
}
.container {
max-width: 1100px;
margin: 0 auto; /* 0 top and bottom and auto on left and right*/
overflow: auto; /* sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.*/
padding: 0 40px;
}
.flex {
flex-direction: row;
}<body>
<!-- Navbar-->
<div class="navbar">
<div class="container flex">
<h1 class="logo">Charles
<nav>
<ul>
<li> <a href="index.html">Home</a></li>
<li> <a href="projects.html">Projects</a></li>
<li> <a href="hobbies.html">Hobbies</a></li>
</ul>
</nav>
</h1>
</div>
</div>
</body>有几件事需要纠正：
- 您使用类
.flex，但它在CSS中没有定义为flexbox。将定义更改为
.flex {
display:flex;
flex-direction: row;
}
- 您的flex容器div只有一个子级，即
<h1>。有了这一个子项，您的div将按预期显示。假设您希望徽标和导航位于同一行，则需要更改HTML。您还需要将<nav>中的列表作为一个灵活框，以便其子项显示在一行中
<body>
<!-- Navbar-->
<div class="navbar">
<div class="container flex">
<h1 class="logo">Charles</h1>
<nav>
<ul class="flex">
<li> <a href="index.html">Home</a></li>
<li> <a href="projects.html">Projects</a></li>
<li> <a href="hobbies.html">Hobbies</a></li>
</ul>
</nav>
</div>
</div>
</body>
flex-direction对该元素没有影响，因为它不是Flex容器。
尝试添加display: flex或display: inline-flex。
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Lato', sans-serif;
color: #333;
line-height: 1.6;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: #333;
}
h1, h2 {
font-weight: 300;
line-height: 1.2;
margin: 10px 0;
}
p {
margin: 10px 0;
}
img {
width: 100%; /*Restrain image size to be equal to container size*/
}
.navbar {
background-color: #047aed;
color: #fff;
height: 70px;
}
.container {
max-width: 1100px;
margin: 0 auto; /* 0 top and bottom and auto on left and right*/
overflow: auto; /* sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.*/
padding: 0 40px;
}
nav ul{
margin-top:20px;
display:flex;
justify-content:space-between;
}<body>
<!-- Navbar-->
<div class="navbar">
<div class="container flex">
<h1 class="logo">Charles
<nav>
<ul>
<li> <a href="index.html">Home</a></li>
<li> <a href="projects.html">Projects</a></li>
<li> <a href="hobbies.html">Hobbies</a></li>
</ul>
</nav>
</h1>
</div>
</div>
</body>只需将display:flex属性添加到您的"；ul"；内部导航元素。没有必要添加额外的类。然后，您可以使用justify内容属性来确定它们的水平显示方式。注意：我们总是将display flex应用于包装器/容器/或其子元素我们希望被视为"的父元素；弹性项目"；。