在<input />标签

Question

.Main {
  width: 100%;
  height: 100%;
}

// css to show the navigation bar top and the image of westminister
h1 {
  text-align: center;
  font: italic bold 50px Georgia, serif;
}

#navbar ul {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  background-color: black;
  font-size: 15px;
  width: 100%;
}

#navbar li {
  float: left;
  list-style-type: none;
}

li a {
  display: inline;
  color: #d9d9d9;
  padding: 25px 20px;
  text-decoration: none;
  list-style-type: none;
}

.topnavbar {
  text-align: right;
  font: size 19px;
  padding: 18px 20px;
  margin-right: 10px;
  float: right;
}

#searchbar {
  text-align: right;
  text-decoration-color: #ffffff;
  font: size 15px;
  padding: 10px;
  padding-right: 20px;
  margin-top: 18px;
  margin-right: 20px;
  float: right;
  background: #2f3640;
  transform: translate3d(-50%, 50%);
  border-radius: 40px;
  outline: none;
  transition: 0.4s;
  width: 150px;
}

.search-btn {
  text-decoration: none;
}

#btn {
  margin-top: 30px;
  color: white;
  display: flex;
}

li a:hover:not(.active) {
  opacity: 1;
  color: #ffffff;
}

.active {
  text-decoration: none;
  color: #4da6ff;
  outline: none;
}

我正在尝试使用AngularJS制作此Web应用程序，但我对此还很陌生。我正在为页面创建一个导航栏，我认为我已经正确地完成了正常的栏。但是，我还想添加一个搜索栏（由于我不知道该怎么做，所以尚未完成该功能），当鼠标悬停在<a>标记上时，它将具有吸引力。我指的是将在下面链接的视频。区别在于他不是在视频中间使用导航栏，而是使用导航栏

css和html如下所示。

我指的视频是这样的：https://www.youtube.com/watch?v=v1PeTDrw6OY

PS：我想做的是在灰色填充区域内添加图标，这样我就可以将填充设置为零，并且仅在填充区域内放置图标，然后将鼠标悬停在扩展栏上，让用户类型。对此的任何投入都将受到高度赞赏。谢谢

Answer 1

您需要有一个公共的父元素，以使其更容易使用。使用您的HTML，最直接的方法是将<a>包含在<li>中，而不是之后再添加它。所以把这个

<li><input type="text" id="searchbar" placeholder="Search Here"> </li>
<a class="search-btn" href="#"> <i id="btn" class="fas fa-search"></i> </a>

对此：

<li>
    <input type="text" id="searchbar" placeholder="Search Here"> 
    <a class="search-btn" href="#"> <i id="btn" class="fa fa-search"></i> </a>
</li>

然后，您可以使用position: absolute并通过添加以下CSS轻松将图标放置在所需位置：

li {
    position: relative;
}
li input + a {
    position: absolute;
    top: 4px; /* change this */
    left: 5px; /* change this */
}

Answer 2

使用search-bar类，您可以获得所需的内容

.Main {
  width: 100%;
  height: 100%;
}

// css to show the navigation bar top and the image of westminister
h1 {
  text-align: center;
  font: italic bold 50px Georgia, serif;
}

#navbar ul {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  background-color: black;
  font-size: 15px;
  width: 100%;
}

#navbar li {
  float: left;
  list-style-type: none;
}

li a {
  display: inline;
  color: #d9d9d9;
  padding: 25px 20px;
  text-decoration: none;
  list-style-type: none;
}

.topnavbar {
  text-align: right;
  font: size 19px;
  padding: 18px 20px;
  margin-right: 10px;
  float: right;
}

#searchbar {
  text-align: left;
  text-decoration-color: #ffffff;
  font: size 15px;
  padding: 10px;
  padding-right: 20px;
  float: right;
  background: #2f3640;
  transform: translate3d(-50%, 50%);
  border-radius: 40px;
  outline: none;
  transition: 0.4s;
  width: 150px;
}

.search-btn {
    text-decoration: none;
    background: transparent;
    outline: 0;
    border: 0;
    color: #fff;
    position: absolute;
    right: 10px;
    top: 38px;
    bottom: 0;
    margin: auto 0;
    line-height: 100%;
    display: inline-block;
    line-height: 100%;
    display: block;
    height: 22px;
}

li a:hover:not(.active) {
  opacity: 1;
  color: #ffffff;
}

.active {
  text-decoration: none;
  color: #4da6ff;
  outline: none;
}

.search-bar{

	    position: relative;
}

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<div class="Main">
  <div id="navbar">



    <ul>
      <li><img src="assets/img/xyz.png" alt="logo" width="180px" height="80px" style="float:left"></li>
      <li> <a class="topnavbar active" [routerLink]="['page6']">Display Items </a> </li>
      <li> <a class="topnavbar" [routerLink]="['page2']">Add Items </a> </li>
      <li> <a class="topnavbar" [routerLink]="['page3']"> Delete Items </a> </li>
      <li> <a class="topnavbar" [routerLink]="['page4']">Borrow Items </a> </li>
      <li> <a class="topnavbar" [routerLink]="['page5']">Return Items</a> </li>
      <li> <a class="topnavbar" [routerLink]="['page6']">Generate Report </a> </li>
      <li> <a class="topnavbar" [routerLink]="['page6']">Generate Report </a> </li>
      <li>
      	<div class="search-bar">
        	<input type="text" id="searchbar" placeholder="Search Here">  
            <button class="search-btn"><i id="btn" class="fas fa-search"></i></button>
        </div>
      </li>
     






    </ul>




  </div>



</div>