我正在尝试将链接"入门"和"雇用我"的最后两个放在导航的末尾。我附上了一张照片和我的代码。我正在使用 SASS 进行样式设置
我已经尝试解决这个问题 4 天了。我设法使用Display flex将其按照我想要的方式放置,它在我绝对定位徽标后起作用在此处输入图像描述
.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
下。我建议使用弹性框进行布局。
.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>
若要将徽标包含在行中,可以 1( 使用嵌套的弹性框,或 2( 将徽标设置为列表项之一。
示例 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="https://i.stack.imgur.com/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="https://i.stack.imgur.com/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>
您是否考虑过使用 bootstrap 或其他 css 框架? 在没有 css 框架的情况下这样做,你正在做很多重新发明轮子的事情。 实际上,世界上每个网页都有一个导航栏,因此这种东西是使用框架为您构建的。 它还具有响应速度的额外好处,因此在所有设备(台式机,平板电脑,手机(上看起来都不错。 一般来说,你会过得更轻松。
以下是引导导航栏组件的文档:
https://getbootstrap.com/docs/4.0/components/navbar/
这是一个页面,其中包含一些您可以使用的示例:https://getbootstrap.com/docs/4.0/examples/navbars/