标签：right auto site li nav margin left
效果如图
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #709b90;
}
/* 全局外边距 */
body *+* {
margin-top: 1.5em;
}
/* 双容器，用于网页内容居中 */
.wrapper {
max-width: 1080px;
margin: 0 auto;
}
.nav-site {
display: flex;
margin-top: 1.5em;
border: .2em;
background: #5f4b44;
list-style: none;
padding: .8em .5em;
}
/* 覆盖猫头鹰选择器顶部外边距 */
.nav-site>li {
margin-top: 0;
}
.nav-site>li>a {
display: block;
padding: .2em .5em;
color: #fdfaf9;
text-decoration: none;
background: #cc6b5a;
}
/* 选中所有前面有列表项的列表项（就是说除了第一项之外的所有列表项） */
.nav-site li+li {
margin-left: 1.5em;
}
/* 核心代码（★★★) 弹性盒子内的auto外边距会填充所有可用空间
核心代码（★★★）弹性盒子内的auto外边距会填充所有可用空间
核心代码（★★★）弹性盒子内的auto外边距会填充所有可用空间
*/
.nav-site .nav-right {
margin-left: auto;
}
</style>
</head>
<body>
<nav>
<ul class="nav-site wrapper">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Support</a></li>
<li class="nav-right"><a href="#">About</a></li>
</ul>
</nav>
</body>
</html>
标签：right,
auto,
site,
li,
nav,
margin,
left
From： https://www.cnblogs.com/openmind-ink/p/16879004.html