Question

在标题的顶部，我有两个导航。现在，他们彼此重叠，like this。

我希望他们站在一边。似乎所有我需要做的是设置导航元素显示：inline;，但它不起作用。我也尝试过向左浮动并向右浮动。我已经尝试了很多选项并做了一些研究，感觉真的迷失了。

这是html。

<body>
<header>
  <nav class="navbar">
    <ul class="nav">
      <li>HOME</li>
      <li>WORK</li>
      <li>ABOUT</li>
      <li>CONTACT</li>
    </ul>
  </nav>
  <nav>
    <ul class="nav">
      <li><img src="images/youtube.png" alt=""></li>
      <li><img src="images/twitter.png" alt=""></li>
      <li><img src="images/facebook.png" alt=""></li>
    </ul>
  </nav>
</header>

Answer 1

您遇到的第一个错误是您当前的代码无法与Bootstrap Navbar一起使用。 navbar-right课程可以帮助您实现目标。你需要在同一行上为两个导航栏提供类似的东西：

<header>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <ul class="nav navbar-nav">
        <li>HOME</li>
        <li>WORK</li>
        <li>ABOUT</li>
        <li>CONTACT</li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><img src="images/youtube.png" alt=""></li>
        <li><img src="images/twitter.png" alt=""></li>
        <li><img src="images/facebook.png" alt=""></li>
      </ul>
    </div>
  </nav>
</header>

如果您不使用Bootstrap，那么对于自定义CSS，您需要提供float: left和float: right。我通过更改删除重复的<nav>并使用新的类nav-right重新格式化了您的HTML：

.navbar {overflow: hidden;}
.nav, .nav li {display: block; margin: 0; padding: 0; list-style: none;}
.nav li {display: inline-block;}
.nav {float: left;}
.nav.nav-right {float: right;}

<header>
  <nav class="navbar">
    <ul class="nav">
      <li>HOME</li>
      <li>WORK</li>
      <li>ABOUT</li>
      <li>CONTACT</li>
    </ul>
    <ul class="nav nav-right">
      <li><img src="images/youtube.png" alt=""></li>
      <li><img src="images/twitter.png" alt=""></li>
      <li><img src="images/facebook.png" alt=""></li>
    </ul>
  </nav>
</header>

Answer 2

将display: inline-block;添加到nav，如果您希望列表项水平对齐，还要将display: inline-block;添加到nav li：

＆＃13;

nav {
display: inline-block;
}
nav li {
display: inline-block;
}

＆＃13;

<header>
  <nav class="navbar">
    <ul class="nav">
      <li>HOME</li>
      <li>WORK</li>
      <li>ABOUT</li>
      <li>CONTACT</li>
    </ul>
  </nav>
  <nav>
    <ul class="nav">
      <li><img src="images/youtube.png" alt="">A</li>
      <li><img src="images/twitter.png" alt="">B</li>
      <li><img src="images/facebook.png" alt="">C</li>
    </ul>
  </nav>
</header>

＆＃13;

如果您打算左右放置，则只能将inline-block放在li元素上，并将float: left放在第一个float: right放在第二个nav上{1}}

＆＃13;

nav:first-of-type {
 float: left;
}
nav:last-of-type {
 float: right;
}
nav:first-of-type ul {
 float: left;
 padding-left: 0;
}
nav li {
display: inline-block;
}

＆＃13;

<header>
  <nav class="navbar">
    <ul class="nav">
      <li>HOME</li>
      <li>WORK</li>
      <li>ABOUT</li>
      <li>CONTACT</li>
    </ul>
  </nav>
  <nav>
    <ul class="nav">
      <li><img src="images/youtube.png" alt="">A</li>
      <li><img src="images/twitter.png" alt="">B</li>
      <li><img src="images/facebook.png" alt="">C</li>
    </ul>
  </nav>
</header>

＆＃13;

Answer 3

你应该使用flexbox。

header {
  display: flex;
  justify-content: space-between;
}

这使得header的两个孩子都在同一条线上并证明它们之间的空间使它们成为你想要的边缘。

您还需要为这两个孩子设置样式，但这取决于您。

我有两个导航，我想要在我的标题顶部的同一行

3 个答案: