html - 如何分隔 HTML 列表中的元素，使其在水平导航中像三个元素在一侧，两个在另一侧

Question

我已经在要拆分列表项的地方放了一个 div 标签。但是，当我向左或向右浮动时，它不起作用。我想创建一个导航栏，用户可以在其中浏览左侧的网站并在右侧管理他们的帐户。谁能帮帮我？

这是 HTML 和 CSS 代码:

        ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #0f0f0f;
      border-radius: 50px;
    }
    
    li {
      float: left;
      background-color: #0f0f0f;
    }
    
    li a {
      display: block;
      color: #8ca2ff;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    font-size: 20px;
    }
    
    li a:hover {
      background-color: #111;
    }

    <div class="header">
      <ul>
        <div class="first">
          <li><a href="">Home</a></li>
          <li><a href="">Updates</a></li>
          <li><a href="">Blog</a></li>
        </div>
        <div class="last">
          <li><a href="">Sign In</a></li>
          <li><a href="">Login</a></li>
        </div>
      </ul>
    </div>

How The Navigation Bar Looks Now

Answer 1

你能检查下面的代码吗？希望它对您有用。

根据 Html 标准，我们不能在 ul(无序列表)中直接使用 div，所以我们在 中添加了 2 个 ul .navigation 分区。在 flex 属性、display:flex; 和 justify-content:space-between; 的帮助下，我们在 .navigation 中按照您的要求。

请引用此链接: https://jsfiddle.net/yudizsolutions/764rdezq/1/

.navigation {
  background-color: #0f0f0f;
  border-radius: 50px; 
  overflow: hidden; 
  display:flex; 
  display: -webkit-flex;
  justify-content:space-between;
  -webkit-justify-content:space-between;
}

ul { 
  list-style-type: none;
  margin: 0;
  padding: 0;
  display:flex; 
  display: -webkit-flex;
 }

li {
  
  background-color: #0f0f0f;
}

li a {
  display: block;
  color: #8ca2ff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
}

li a:hover {
  background-color: #111;
}

<div class="header">
  <div class="navigation">
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">Updates</a></li>
      <li><a href="">Blog</a></li>
     </ul>
    <ul>
      <li><a href="">Sign In</a></li>
      <li><a href="">Login</a></li>
    </ul>
  </div>
</div>