Question

我正在设计导航栏，我需要将搜索图标放置在搜索栏中的帮助。我认为绝对定位在相对容器形式中能胜任吗？

我的格式为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>

我该如何实现？

Answer 1

check it out in w3schools

<!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>

Answer 2

相对于绝对位置，而不是绝对位置

.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: relative;
  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>

Answer 3

在您搜索图标CSS时将其从绝对更改为相对

尝试阅读 Difference between style = "position:absolute" and style = "position:relative"

我对搜索栏图标的位置感到困惑

3 个答案: