Question

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

put search icon on navbar

//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 @gokhyildiz</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，将此标签赋予其父标签

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

1 个答案: