将两个链接移动到导航右侧

问题描述 投票：0回答：2

我正试图在导航结束时将“开始”和“雇用我”的最后两个链接放到右边。我附上了一张照片和我的代码。我正在使用SASS进行造型

我已经尝试和错误这个问题4天了。我设法按照我想要的方式使用显示flex，它在我绝对位于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>
html css css3 flexbox
2个回答
2
投票

你需要先修复标记，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>

要将徽标作为行的一部分，您可以1）使用嵌套的flexbox，或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>
-1
投票

您是否考虑过使用bootstrap或其他css框架？通过这样做而没有css框架，你正在做很多重新发明轮子。实际上，世界上每个网页都有一个导航栏，所以这种东西是用框架为你构建的。它还具有响应性的额外优势，因此它在所有设备（台式机，平板电脑，手机）上看起来都很不错。一般来说，你会有一个更容易的时间。

以下是bootstrap导航栏组件的文档： https://getbootstrap.com/docs/4.0/components/navbar/

这是一个页面，其中包含一些您可以使用的示例：https://getbootstrap.com/docs/4.0/examples/navbars/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.