我正在设计一个导航栏，我需要帮助在搜索栏中定位我的搜索图标。我认为相对容器形式中的绝对定位可以完成这项工作？
我有 search-ct 的形式，并在其旁边输入图像。
.navbar {
width: 100%;
height: 80px;
background-color: red;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
}
.navbar img {
width: 100px;
height: 70px;
}
.search-ct {
width: 20%;
box-sizing: border-box;
align-items: center;
display: flex;
flex-wrap: no-wrap;
}
.search-icon {
position: absolute;
width: 25px!important;
height: 30px!important;
display: flex;
}
.search-input {
height: 40px;
border: 2px solid transparent;
border-radius: 70px;
text-indent: 10px;
}<ul class='navbar'>
<img src='../assets/images/favicon.png' class='img-1' />
<form class='search-ct'>
<input class='search-input' placeholder='Search'>
<img class='search-icon' src='./assets/images/search.png'>
</form>
<div class='container-nav-buttons' style='display:none;'>
<button><a>HOME</a></button>
<button><a>SHOP</a></button>
<button><a>APPS</a></button>
<button><a>CONTACT</a></button>
</div>
<svg class='svg-nav' version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"/><path fill="#000000" d="m269.50192 203.12325l-14.907623 309.4995l0 0c-1.9529419 40.545288 -17.996399 72.73224 -35.83406 71.89154c-17.837677 -0.84069824 -30.714783 -34.390625 -28.761856 -74.93591l14.907623 -309.4995l0 0c1.9529419 -40.545273 17.996399 -72.73219 35.83406 -71.89151c17.837662 0.84069824 30.714798 34.390656 28.761856 74.93591z" fill-rule="evenodd"/><path fill="#000000" d="m241.3195 203.3388l591.2756 0l0 61.480316l-591.2756 0z" fill-rule="evenodd"/><path fill="#000000" d="m241.3195 449.26282l532.8819 0l0 46.740143l-532.8819 0z" fill-rule="evenodd"/><path fill="#000000" d="m248.14636 333.82135l553.3858 0l0 33.19684l-553.3858 0z" fill-rule="evenodd"/><path fill="#000000" d="m845.83777 255.70149l-37.220947 198.45943l0 0c-4.8760986 25.998718 -19.406982 45.131836 -32.45569 42.735016c-13.048706 -2.39682 -19.67395 -25.415985 -14.797852 -51.414703l37.220947 -198.45943l0 0c4.8760986 -25.998718 19.406982 -45.131836 32.45569 -42.735c13.048706 2.39682 19.67395 25.41597 14.797852 51.41469z" fill-rule="evenodd"/><path fill="#000000" d="m427.79663 248.37027l-16.566925 205.85828l-25.606323 -2.0472412l16.566925 -205.85828z" fill-rule="evenodd"/><path fill="#000000" d="m611.26135 257.02603l-16.566895 205.85825l-25.606323 -2.0472412l16.566956 -205.85826z" fill-rule="evenodd"/><path fill="#000000" d="m221.75337 541.68036l482.86615 0l0 33.1969l-482.86615 0z" fill-rule="evenodd"/><path fill="#000000" d="m114.00525 126.666664l127.30708 0l0 56.566933l-127.30708 0z" fill-rule="evenodd"/><path fill="#000000" d="m216.47675 630.2187l0 0c0 -30.562622 26.136688 -55.338562 58.37796 -55.338562l0 0c15.482788 0 30.331451 5.8303223 41.27942 16.208313c10.947998 10.377991 17.09851 24.453552 17.09851 39.13025l0 0c0 30.562683 -26.136688 55.338623 -58.37793 55.338623l0 0c-32.241272 0 -58.37796 -24.77594 -58.37796 -55.338623z" fill-rule="evenodd"/><path fill="#000000" d="m569.0679 630.2187l0 0c0 -30.562622 26.136658 -55.338562 58.37793 -55.338562l0 0c15.482788 0 30.331482 5.8303223 41.27948 16.208313c10.947937 10.377991 17.09851 24.453552 17.09851 39.13025l0 0c0 30.562683 -26.136719 55.338623 -58.37799 55.338623l0 0c-32.241272 0 -58.37793 -24.77594 -58.37793 -55.338623z" fill-rule="evenodd"/></g></svg>
<img src='../assets/images/account.png' class='acct-img'>
</ul>我怎样才能做到这一点？
最佳答案
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #2196F3;
color: white;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
@media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div style="padding-left:16px">
<h2>Responsive Search Bar</h2>
<p>Navigation bar with a search box and a submit button inside of it.</p>
<p>Resize the browser window to see the responsive effect.</p>
</div>
</body>
</html>关于html - 我对我的搜索栏图标定位感到困惑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54587577/