我不知道为什么flex-end不能在我的网站上工作，我知道有什么东西打断了它，但我就是找不到它。
对于有兴趣帮助的人来说，这里是代码，我试图只对齐导航栏的navbar-links-end和navbar-links-middle到end:
这就是你应该知道的所有细节，如果还有什么问题，请发表评论，我会尽快回答的
body {
font-family: 'Roboto', sans-serif;
}
.navbar {
top: 0;
left: 0;
display: flex;
flex-direction: row;
position: fixed;
background: white;
margin-left: auto;
border-bottom: 1px solid black;
width: 70px;
height: 70px;
}
.navbar-logo {
justify-content: flex-start;
}
.navbar-links-left {
display: flex;
justify-content: flex-start;
list-style-type: none;
align-items: center;
/* add this property */
width: auto;
}
.navbar-link {
margin-right: 2rem;
color: #0068b5;
font-size: 16px;
align-items: center;
}
.navbar-links-middle {
display: flex;
justify-content: flex-end;
list-style-type: none;
align-items: center;
/* add this property */
width: auto;
}
.navbar-links-end {
display: flex;
justify-content: flex-end;
list-style-type: none;
align-items: center;
/* add this property */
margin-left: auto;
width: auto;
}<nav class="navbar">
<img class="navbar-logo" src="images/intel-header-logo.png">
<ol class="navbar-links-left">
<li class="navbar-link">
<p>PRODUCTS</p>
</li>
<li class="navbar-link">
<p>SUPPORT</p>
</li>
<li class="navbar-link">
<p>SOLUTIONS</p>
</li>
<li class="navbar-link">
<p>DEVELOPERS</p>
</li>
<li class="navbar-link">
<p>PARTNERS</p>
</li>
</ol>
<ol class="navbar-links-middle">
<li class="navbar-link">
<i class="far fa-user"></i>
</li>
<li class="navbar-link">
<i class="fa-solid fa-globe"></i>
</li>
<li class="navbar-link" style="white-space: nowrap;">
<p>USA (ENGLISH)</p>
</li>
</ol>
<ol class="navbar-links-end">
<li class="navbar-link">
<i class="fa-solid fa-magnifying-glass"></i>
</li>
<li class="navbar-link" style="white-space: nowrap;">
<p>Search: Intel.com</p>
</li>
</ol>
</nav>为什么有.navbar{width:70px}?应该是100%:
body {
font-family: 'Roboto', sans-serif;
}
.navbar {
top: 0;
left: 0;
display: flex;
flex-direction: row;
position: fixed;
background: white;
margin-left: auto;
border-bottom: 1px solid black;
width: 100%;
height: 70px;
}
.navbar-logo {
justify-content: flex-start;
}
.navbar-links-left {
display: flex;
justify-content: flex-start;
list-style-type: none;
align-items: center; /* add this property */
width: auto;
}
.navbar-link {
margin-right: 2rem;
color: #0068b5;
font-size: 16px;
align-items: center;
}
.navbar-links-middle {
display: flex;
justify-content: flex-end;
list-style-type: none;
align-items: center; /* add this property */
width: auto;
}
.navbar-links-end {
display: flex;
justify-content: flex-end;
list-style-type: none;
align-items: center; /* add this property */
margin-left: auto;
width: auto;
}<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<nav class="navbar">
<img class="navbar-logo" src="images/intel-header-logo.png">
<ol class="navbar-links-left">
<li class="navbar-link">
<p>PRODUCTS</p>
</li>
<li class="navbar-link">
<p>SUPPORT</p>
</li>
<li class="navbar-link">
<p>SOLUTIONS</p>
</li>
<li class="navbar-link">
<p>DEVELOPERS</p>
</li>
<li class="navbar-link">
<p>PARTNERS</p>
</li>
</ol>
<ol class="navbar-links-middle">
<li class="navbar-link">
<i class="far fa-user"></i>
</li>
<li class="navbar-link">
<i class="fa-solid fa-globe"></i>
</li>
<li class="navbar-link" style="white-space: nowrap;">
<p>USA (ENGLISH)</p>
</li>
</ol>
<ol class="navbar-links-end">
<li class="navbar-link">
<i class="fa-solid fa-magnifying-glass"></i>
</li>
<li class="navbar-link" style="white-space: nowrap;">
<p>Search: Intel.com</p>
</li>
</ol>
</nav>
</body>
</html>将.navbar改为width: 100%;
将.navbar-links-end上的margin-left: auto;移到.navbar-links-middle上。
body {
font-family: 'Roboto', sans-serif;
}
.navbar {
top: 0;
left: 0;
display: flex;
flex-direction: row;
position: fixed;
background: white;
margin-left: auto;
border-bottom: 1px solid black;
width: 100%;
height: 70px;
}
.navbar-logo {
justify-content: flex-start;
}
.navbar-links-left {
display: flex;
justify-content: flex-start;
list-style-type: none;
align-items: center;
/* add this property */
width: auto;
}
.navbar-link {
margin-right: 2rem;
color: #0068b5;
font-size: 16px;
align-items: center;
}
.navbar-links-middle {
display: flex;
justify-content: flex-end;
list-style-type: none;
align-items: center;
/* add this property */
margin-left: auto;
width: auto;
}
.navbar-links-end {
display: flex;
justify-content: flex-end;
list-style-type: none;
align-items: center;
/* add this property */
width: auto;
}<head>
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<nav class="navbar">
<img class="navbar-logo" src="images/intel-header-logo.png">
<ol class="navbar-links-left">
<li class="navbar-link">
<p>PRODUCTS</p>
</li>
<li class="navbar-link">
<p>SUPPORT</p>
</li>
<li class="navbar-link">
<p>SOLUTIONS</p>
</li>
<li class="navbar-link">
<p>DEVELOPERS</p>
</li>
<li class="navbar-link">
<p>PARTNERS</p>
</li>
</ol>
<ol class="navbar-links-middle">
<li class="navbar-link">
<i class="far fa-user"></i>
</li>
<li class="navbar-link">
<i class="fa-solid fa-globe"></i>
</li>
<li class="navbar-link" style="white-space: nowrap;">
<p>USA (ENGLISH)</p>
</li>
</ol>
<ol class="navbar-links-end">
<li class="navbar-link">
<i class="fa-solid fa-magnifying-glass"></i>
</li>
<li class="navbar-link" style="white-space: nowrap;">
<p>Search: Intel.com</p>
</li>
</ol>
</nav>