尝试使用弹性框将链接带到导航栏的右侧[重复]
Posted
技术标签:
【中文标题】尝试使用弹性框将链接带到导航栏的右侧[重复]【英文标题】：Trying to bring links to the right side of the nav bar with flex box [duplicate] 【发布时间】：2019-04-20 22:35:09 【问题描述】：我正在尝试获取页面右侧的链接，并且使用弹性框将徽标留在左侧。我在.main-nav 上尝试了justify-content: flex-end;，但没有任何反应。
*
box-sizing: border-box;
.header
display: flex;
width: 100%;
background: green;
.main-nav
display: flex;
.main-nav li
text-align: right;
<header class="header">
<h1 class="logo"><a href="#">Flexbox</a></h1>
<ul class="main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>【问题讨论】：
【参考方案1】：*
box-sizing: border-box;
.header
width: 100%;
background: green;
.main-nav
display: flex;
justify-content:flex-end;
.main-nav li
text-align: right;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<!-- <script src="main.js"></script> -->
</head>
<body>
<header class="header">
<h1 class="logo"><a href="#">Flexbox</a></h1>
<ul class="main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
</body>
</html>问题是您已将 header 分配为 flexbox，并且在其中，您还将 main-nav 分配为 flexbox。
【讨论】：
【参考方案2】：给出<ul> 元素（.main-nav）：
margin-left: auto;
【讨论】：
投票为重复然后anwsering？ @TemaniAfif -否，首先回答，然后重复投票。回答起来很容易，所以我说，为什么不花 1 分钟时间把它写下来帮助这个人。以上是关于尝试使用弹性框将链接带到导航栏的右侧[重复]的主要内容，如果未能解决你的问题，请参考以下文章