我正在尝试将“开始”和“雇用我”链接的最后两个放在导航的末尾。我附上了一张照片和我的代码。我正在使用 SASS 进行样式设计
我已经尝试和错误解决这个问题 4 天了。我设法使用 display flex 以我想要的方式放置它，在我将 absolute 放在 Logo 上后它起作用了 enter image description here
.header
max-width: 100%
height: 80px
border: 1px solid #dfe3e8
.container
height: 100%
max-width: 100%
padding: 0px 7em
display: flex
justify-content: flex-start
.logo
background: url("/sass/img/test-logo2.svg")
size: contain
repeat: no-repeat
width: 135px
height: 35px
margin: 20px 20px 0px 0px
.nav
margin: 7px 0px 0px
ul
lists-style: none
ul li
display: inline-block
padding: 20px
ul li a
text-decoration: none
.right-nav
display: inline-flex<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pratice</title>
<link rel="stylesheet" href="css/app.css" type="text/css">
<!--- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="container">
<div class="logo">
<!---<img src="../sass/img/test-logo2.svg" alt="test" class="logo">-->
</div>
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<div class="right-nav">
<li><a href="#">Get started</a></li>
<li><a href="#">Hire me</a></li>
</ul>
</div>
</div>
</div>
</header>
</body>
</html>最佳答案
您需要先修复标记，div 不能直接在ul 下。我建议使用 flexbox 进行布局。
.nav ul {
display: flex;
padding-left: 0;
}
.nav li {
list-style: none;
}
.nav li:not(:last-child) {
margin-right: 20px;
}
.nav li:nth-last-child(2) {
margin-left: auto; /* align last two items to the right */
}<nav class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Get started</a></li>
<li><a href="#">Hire me</a></li>
</ul>
</nav>要将 Logo 包含在行中，您可以 1) 使用嵌套 flexbox，或 2) 使 Logo 成为列表项之一。
示例 1:
.container {
display: flex;
align-items: center;
}
.nav {
flex: 1;
margin-left: 20px;
}
.nav ul {
display: flex;
padding-left: 0;
}
.nav li {
list-style: none;
}
.nav li:not(:last-child) {
margin-right: 20px;
}
.nav li:nth-last-child(2) {
margin-left: auto;
}<div class="container">
<div class="logo"><img src="/image/U8Pq6.png" width="30" height="30" alt=""></div>
<nav class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Get started</a></li>
<li><a href="#">Hire me</a></li>
</ul>
</nav>
</div>示例 2:
.nav ul {
display: flex;
align-items: center;
padding-left: 0;
}
.nav li {
list-style: none;
}
.nav li:not(:last-child) {
margin-right: 20px;
}
.nav li:nth-last-child(2) {
margin-left: auto;
}<nav class="nav">
<ul>
<li><img src="/image/U8Pq6.png" width="30" height="30" alt=""></li>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Get started</a></li>
<li><a href="#">Hire me</a></li>
</ul>
</nav>关于html - 将两个链接移动到导航右侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49076584/