并排对齐两个导航列表

Question

What I'm trying to do is create a store-banner, one half with its contents aligned left, the other half with its contents on the right with space inbetween for resizing.我想要做的是创建一个商店横幅，一半的内容左对齐，另一半的内容在右侧，中间有空间用于调整大小。 I've attached an image to explain what I'm trying to do.我附上了一张图片来解释我想要做什么。

    <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">

    <link rel="stylesheet" href="scss/custom.css">

    <title>Hello, world!</title>
  </head>
  <body>
    
    <div class="container-fluid flex-nowrap topBanner" role="banner">
        <ul class="nav d-flex">
            <li class="nav-item">
                <a href="#" class="nav-link">1</a>            
            </li>
            <li>
                <a href="#" class="nav-link">2</a>            
            </li>
            <li>
                <a href="#" class="nav-link">3</a>            
            </li>
        </ul>
        <ul class="nav d-flex justify-content-end">
          <li class="nav-item">
              <a href="#" class="nav-link">4</a>            
          </li>
          <li>
              <a href="#" class="nav-link">5</a>            
          </li>
          <li>
              <a href="#" class="nav-link">6</a>            
          </li>
      </ul>
    </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

  </body>
</html>
.topBanner {
  background-color: purple;
  text-align: center;
  width: 50%;
  position: relative;
}

trying to make banner like this试图制作这样的横幅

Answer 1

try adding this to your css:尝试将此添加到您的 css：

  display: flex;
  justify-content: space-between;

May I remind you, when writing CSS inside an HTML document, you must use the style tag like so:我要提醒你，在 HTML 文档中编写 CSS 时，必须使用如下style标记：

    <style>
    .topBanner {
        background-color: purple;
        text-align: center;
        width: 50%;
        position: relative;
        display: flex;
        justify-content: space-between;
    }

</style>

Answer 2

To do this on bootstrap , just add these two classes to container-fluid :要在bootstrap上执行此操作，只需将这两个类添加到container-fluid ：

d-flex 
justify-content-between

Here:这里：

<div class="container-fluid d-flex justify-content-between flex-nowrap topBanner" role="banner">
...

并排对齐两个导航列表

问题描述

2 个解决方案

解决方案1
1 2021-01-19 05:41:41

解决方案2
1 已采纳 2021-01-19 05:49:51

并排对齐两个导航列表

问题描述

2 个解决方案

解决方案1 1 2021-01-19 05:41:41

解决方案2 1 已采纳 2021-01-19 05:49:51

解决方案1
1 2021-01-19 05:41:41

解决方案2
1 已采纳 2021-01-19 05:49:51