Question

我正在制作一个导航栏，并在其上放置了所有锚点。我的左边有些，右边一些。这两个div在导航栏上并排放置，但是每个div中的第二个锚点都位于第一个锚点的下方。

我在网上搜索并尝试了所有我能找到的东西，但是找到的所有解决方案都没有用。

body {
	background-color: #ec1320;
	color: #ec1320;
}

.nav-bar {
	background-color: #1524ea;
	color: white;
	height: 100px;
	position: absolute;
	width: 100%;
	height: 8%;
	left: 0px;
	top: 0px;
}

.nav-link {
	color: #d0d0d0;
	font-size: 20px;
	position: relative;
	margin-top: 5px;
}

.nav-link:hover {
	color: gray;
}

.nav-head {
	color: white;
	font-size: 30px;
	margin-top: -4px;
}

.nav-head:hover {
	color: gray;
}

.left-nav {
	position: absolute;
	left: 0px;
}

.right-nav {
	position: absolute;
	right: 0px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
  <header>
    <nav class="nav-bar">
      <div class='container'>
        <div class="left-nav">
          <a href="index.html" class='nav-item nav-head nav-link'>Gamer Blog</a>
          <a href='index.html' class='nav-item nav-link'>Home</a>
        </div>
        <div class="right-nav">
          <a href='login.html' class='nav-item nav-link'>Login</a>
          <a href='register.html' class='nav-item nav-link'>Register</a>
        </div>
      </div>
    </nav>
  </header>
</body>

我需要将每个锚点与其父div中的其他锚点并排放置。

Answer 1

由于您使用的是Bootstrap，因此可以将所有链接放在同一个导航容器中。在最后一个左对齐的链接上，将右页边距设置为自动（mr-auto）。这会将剩余的链接向右移动。我尝试了一些样式以使其看起来更好，包括将Bootstrap类从容器切换为容器流体：

body {
  background-color: #ec1320;
  color: #ec1320;
}

.nav-bar {
  background-color: #1524ea;
  color: white;
}

.nav-link {
  color: #d0d0d0;
  font-size: 20px;
  position: relative;
}

.nav-link:hover {
  color: gray;
}

.nav-head {
  color: white;
}

.nav-head:hover {
  color: gray;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<body>
  <header>
    <nav class="nav-bar">
      <div class='container-fluid'>
        <nav class="nav">
          <a href="index.html" class='nav-item nav-head nav-link'>Gamer Blog</a>
          <a href='index.html' class='nav-item nav-link mr-auto'>Home</a>
          <a href='login.html' class='nav-item nav-link'>Login</a>
          <a href='register.html' class='nav-item nav-link'>Register</a>
        </nav>
      </div>
    </nav>
  </header>
</body>

Answer 2

将.right-nav和left-nav的内容放入Flexbox。

尝试一下：

.right-nav, .left-nav {
  display: flex;
}

那么您会很好！

希望有帮助！干杯

如何并排放置两个锚

2 个答案: