我想在顶部导航菜单的右侧对齐元素，它是一个固定位置的菜单，所以 text-align: right;行不通。
到目前为止我尝试了什么: 对于正常显示(计算机/笔记本电脑)，我尝试做类似的事情:
.navbar {
position: fixed;
width: 100%;
}
.navbar .menu_items {
margin-left: 75% /*this leaves a 25% on the right for the menu items *%
}
这对于正常显示来说效果很好，但是当最小化浏览器窗口时，菜单项会堆叠在剩余的 25% 宽度中。
我想针对不同尺寸的屏幕进行媒体查询，但效率不高。
这是我的代码:
CSS
body, header{
margin: 0;
padding: 0;
}
.navbar {
position: fixed;
background-color: rgb(90,80,50);
width: 100%;
border-bottom: 2px solid rgb(70,60,30);
box-shadow: 2px 2px 3px 1px rgb(70,60,30);
}
.menu-items {
margin: 0;
padding: 1em 1em 1em 0em;
}
.navbar .menu-items li {
padding: inherit;
font-size: 1.5em;
display: inline;
}
.navbar .menu-items li a:link,
.navbar .menu-items li a:visited {
padding: inherit;
padding-left: 0.5em;
text-decoration: none;
color: #eee;
}
.navbar .menu-items li a:hover {
background-color: rgb(70,60,30)
}
HTML
<!DOCTYPE html>
<html>
</html>
<header>
<nav class="navbar">
<ul class="menu-items">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="body">
<br> <hr> <br> <hr> <hr> <br> <hr> <br> <hr> <hr> <br> <hr> <br> <hr> <hr> <br> <hr> <br> <hr> <hr> <br> <hr> <br> <hr> <hr> <br> <hr> <br> <hr> <hr> <br> <hr> <br> <hr> <hr> <br> <hr> <br> <hr> <hr> <br> <hr> <br> <hr> <hr> <br> <hr> <br> <hr> <hr> <br> <hr> <br> <hr> <hr> <br> <hr> <br> <hr> <hr> <br> <hr> <br> <hr> <hr> <br> <hr> <br> <hr> <hr> <br> <hr> <br> <hr> <hr> <br> <hr> <br> <hr> <hr> <br> <hr> <br> <hr>
</div>
</html>
最佳答案
您可以通过将 nav 设置为 display: flex 并将 ul 设置为 margin-left: auto 来实现这一点。当元素处于 flex 上下文中时，任何给定一侧的 margin auto 都会将它们推到框的末尾。
.navbar{
display: flex;
}
.navbar > .menu-items{
margin-left: auto;
}
body,
header {
margin: 0;
padding: 0;
}
.navbar {
position: fixed;
background-color: rgb(90, 80, 50);
width: 100%;
border-bottom: 2px solid rgb(70, 60, 30);
box-shadow: 2px 2px 3px 1px rgb(70, 60, 30);
}
.menu-items {
margin: 0;
padding: 1em 1em 1em 0em;
}
.navbar .menu-items li {
padding: inherit;
font-size: 1.5em;
display: inline;
}
.navbar .menu-items li a:link,
.navbar .menu-items li a:visited {
padding: inherit;
padding-left: 0.5em;
text-decoration: none;
color: #eee;
}
.navbar .menu-items li a:hover {
background-color: rgb(70, 60, 30)
}<header>
<nav class="navbar">
<ul class="menu-items">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="body">
<br>
<hr> <br>
<hr>
<hr> <br>
<hr> <br>
<hr>
<hr> <br>
<hr> <br>
<hr>
<hr> <br>
<hr> <br>
<hr>
<hr> <br>
<hr> <br>
<hr>
<hr> <br>
<hr> <br>
<hr>
<hr> <br>
<hr> <br>
<hr>
<hr> <br>
<hr> <br>
<hr>
<hr> <br>
<hr> <br>
<hr>
<hr> <br>
<hr> <br>
<hr>
<hr> <br>
<hr> <br>
<hr>
<hr> <br>
<hr> <br>
<hr>
<hr> <br>
<hr> <br>
<hr>
<hr> <br>
<hr> <br>
<hr>
<hr> <br>
<hr> <br>
<hr>
<hr> <br>
<hr> <br>
<hr>
<hr> <br>
<hr> <br>
<hr>
</div>关于html - CSS - 在固定的响应式导航菜单中对齐元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58260774/