Question

我正在尝试使链接指向页面的右侧，而徽标使用flex框保留在左侧。我在justify-content: flex-end;上尝试过.main-nav，但没有任何反应。

* {
  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>

Answer 1

给出<ul>元素（.main-nav）：

margin-left: auto;

Answer 2

* {
    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。

尝试使用Flex框将链接带到导航栏的右侧

2 个答案: