Question

我正在尝试创建一个与图中相同的导航栏。我遇到浮动问题。

This is the navigation bar(s) I am trying to make

 <div class="upper_navigation">
            <ul>
                <li><a href="www.facebook.com" target="_blank"><i class="fa fa-facebook icon" aria-hidden="true"></i></a></li>
                <li><a href="twitter.com" target="_blank"><i class="fa fa-twitter icon" aria-hidden="true"></i></a></li>
                <li><a href="www.instagram.com" target="_blank"><i class="fa fa-instagram icon" aria-hidden="true"></i></a></li>
                <li><a href="youtube.com" target="_blank"><i class="fa fa-youtube-play icon" aria-hidden="true"></i></a></li>
            </ul>
            <ul>
                <li class="li_top li_nav"><a href=#contact>Contact</a></li>
                <li class="li_top li_nav"><a href=#sign_up>Sign Up</a></li>
                <li class="li_top li_nav"><a href=#donate>Donate</a></li>
            </ul> 
    </div>

    <div id="main_navigation">
            <ul class="main_nav">
                <li><a href="#about" class="li_nav">About Us</a></li>
                <li><a href="#trips" class="li_nav">Trips</a></li>
                <li><a href="#projects" class="li_nav">Projects</a></li>
                <li><a href="#donations" class="li_nav">Donations</a></li>
                <li><a href="#sponsors" class="li_nav">Sponsors</a></li>
                <li><a href="#contact" class="li_nav">Contact</a></li>
            </ul>
    </div>

Answer 1

要实现您的目标，您可以制作<ul>和<li>内联块，以便它显示在同一行中，然后将.upper_navigation向右浮动并浮动您的{离开{1}}或#main_navigation。在下面的示例中，我使用了.main_nav类。

以下是css的示例。

<ul>

这就是如何浮动你的导航，因为你说你有浮动问题。这是jsfiddle。

Answer 2

是这个输出R U期待

body {
  padding: 0;
  margin: 0;
}
.nav {
  background-color: #00457C;
  height: 50px;
  width: 100%;
}
.mainmenu {
  list-style: none;
  color: white;
}
li {
  float: right;
  margin-left: 20px;
  margin-right: 25px;
  margin-top: 10px;
  font-size: 30px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="stylesheet.css">
  <title>ABCDEF</title>
</head>

<body>

  <div class="nav">
    <ul class="mainmenu">
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
      <li>Item5</li>
      <li>Item6</li>
      <li>Item7</li>
    </ul>
  </div>
</body>

</html>

两个导航条，顶部一个右对齐，底部一个左对齐

2 个答案: