如何在导航栏上的选项卡图标旁边添加搜索图标？

Question

我正在研究 CSS 结构。我是这项业务的新手，但我找不到如何做到这一点。我想在导航栏上的标签图标旁边添加 1 个搜索图标。我找不到可以用来将这两个图标放入同一平面的 CSS 属性。 我使用 colorlib 站点中的暂存模板结构作为源。来源：https://colorlib.com/wp/template/staging/ 如果我需要从 html css 或 js 文件中使用的组件添加不同的结构，只需编写即可。 谢谢。

//Canvas Menu
$(".canvas__open").on('click', function() {
  $(".offcanvas-menu-wrapper").addClass("active");
  $(".offcanvas-menu-overlay").addClass("active");
});

$(".offcanvas-menu-overlay").on('click', function() {
  $(".offcanvas-menu-wrapper").removeClass("active");
  $(".offcanvas-menu-overlay").removeClass("active");
});

.header {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  /*padding: 30px 0 0;*/
}


/* Mobile and Tablet Screen Less then 992px */

@media screen and (max-width: 992px) {
  .header {
    /* top left-right bottom*/
    width: 100%;
    height: 4rem;
    padding: 0.50rem 0.1rem 0.50rem;
  }
  div.canvas__open {
    right: 1rem;
  }
  div.canvas__open span#mySpan {
    top: 120px;
  }
  div.header__logo {
    margin-top: 0.25rem;
    margin-left: 0.5rem;
    margin-bottom: 0.25rem;
  }
}

.canvas__open {
  display: block;
  font-size: 22px;
  color: #ffffff;
  height: 35px;
  width: 35px;
  line-height: 35px;
  text-align: center;
  border: 1px solid #ffffff;
  border-radius: 2px;
  cursor: pointer;
  position: absolute;
  right: 1rem;
  top: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<header>
  <div class="headroom header" id="navbar-main">
    <div class="row">
      <div class="col-lg-3">
        <div class="header__logo">
          <a href="#"><img src="./public/img/logo.png" alt=""></a>
        </div>
        <div class="col-lg-6">
          <nav class="header__menu mobile-menu">
            <ul>
              <li class="active"><a href="./index.html">Home</a></li>
              <!--<li><a href="./projects.html">Projects</a></li>-->
              <li><a href="./about.html">About</a></li>
              <li><a href="#">Pages</a>
                <ul class="dropdown">
                  <li><a href="./Project-details.html">Project Details</a></li>
                  <li><a href="./about.html">About</a></li>
                  <li><a href="./services.html">Services</a></li>
                  <li><a href="./blog-details.html">Blog Details</a></li>
                </ul>
              </li>
              <li><a href="./blog.html">Blog</a></li>
              <li><a href="./contact.html">Contact</a></li>
            </ul>
          </nav>
        </div>
        <div class="col-lg-3">
          <div class="header__widget">
            <span>Contact us</span>
            <!--<h4>+01 123 456 789</h4>-->
          </div>
        </div>
        <i class="fa fa-search" style="margin: 1rem; float: right;"></i>
      </div>

      <div class="canvas__open">
        <i class="fa fa-bars"></i>
      </div>
    </div>
</header>

Answer 1

有两种解决方案：

解决方案 1：

使用display : inline-block，将其用于搜索和三明治导航栏

解决方案 2：

使用display : flex ，把这个给他们的父标签