在标签中包含图标<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>