时间戳

首页 > 解决方案 > 搜索输入在展开时推送链接列表

html - 搜索输入在展开时推送链接列表

问题描述

当我将鼠标悬停在搜索图标上时，带有“forma”类的 div 会展开并将带有链接的列表推到左侧。我怎样才能防止这种情况？我的猜测与位置、显示或宽度有关，但我不确定。这可能不是一项复杂的任务，但我不太擅长 CSS。

这是HTML：

<nav>
    <div class=logo>
        <img src="images/logoicon.png" alt="sunce">
        <img src="images/logotext.png" alt="outdoors" id="logotext"></a>
    </div>
    <ul class="nav-ul">
        <li><a href="#">Destinations</a></li>
        <li><a href="#">Travel style</a></li>
        <li><a href="#">Trabel deals</a></li>
        <li><a href="#">Gear</a></li>
    </ul>
    <div class="forma">
        <input type="search" placeholder="search" class="pretraga">
        <i class="fa fa-search"></i>
    </div>
</nav>

这是CSS：

  nav {
  background-color: steelblue;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  position: sticky;
  top: 0;
  z-index: 2;
}

.nav-ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* background-color: #333; */
}

.nav-ul li {
  display: inline;
  float: left;
}

.nav-ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.nav-ul li:last-child {
  float: right;
}

.nav-ul li a:hover:not(.active) {
  background-color: #111;
}

.forma {
  position: relative;
  top: 20px;
  left: 20px; 
  transform: translate(0, -50%);
  transition: all 1s;
  width: 50px;
  height: 50px;
  background: white;
  box-sizing: border-box;
  border-radius: 25px;
  border: 4px solid white;
  padding: 5px;
  
}

input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  line-height: 30px;
  outline: 0;
  border: 0;
  display: none;
  font-size: 1em;
  border-radius: 20px;
  padding: 0 20px;
}

.fa {
  box-sizing: border-box;
  padding: 10px;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 50%;
  color: black;
  text-align: center;
  font-size: 1.2em;
  transition: all 1s;
}

.forma:hover {
  width: 200px;
  cursor: pointer;
}

.forma:hover input {
  display: block;
}

标签： htmlcss

解决方案

试试下面的 CSS 在这里我改变了一点代码

你的代码

.forma {
  position: relative;
  top: 20px;
  left: 20px; 
  transform: translate(0, -50%);
  transition: all 1s;
  width: 50px;
  height: 50px;
  background: white;
  box-sizing: border-box;
  border-radius: 25px;
  border: 4px solid white;
  padding: 5px;
}

input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  line-height: 30px;
  outline: 0;
  border: 0;
  display: none;
  font-size: 1em;
  border-radius: 20px;
  padding: 0 20px;
}

.forma:hover {
  width: 200px;
  cursor: pointer;
}

.forma:hover input {
  display: block;
}

更新代码

在您的 HTML 页面中添加此链接以获取图标

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

.forma {
    height: 50px;
    width: 250px;
    position: relative;
    top: 20px;
    left: 20px; 
    transform: translate(0, -50%);
}

input {
   position: absolute;
   right: 21px; 
   width: 90px;
   max-width: 350px;  
   transition: all 1s;
   height: 50px;
   background: white;
   box-sizing: border-box;
   border-radius: 25px;
   border: 4px solid white;
   padding: 5px;
   outline: 0;
}

input:focus{
  outline: 0;
}

input:hover{
  width: 350px;
}

您可以查看实时预览

  nav {
  background-color: steelblue;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  position: sticky;
  top: 0;
  z-index: 2;
}

.nav-ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* background-color: #333; */
}

.nav-ul li {
  display: inline;
  float: left;
}

.nav-ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.nav-ul li:last-child {
  float: right;
}

.nav-ul li a:hover:not(.active) {
  background-color: #111;
}

.forma {
    height: 50px;
    width: 250px;
    position: relative;
    top: 20px;
    left: 20px; 
    transform: translate(0, -50%);
}

input {
  position: absolute;
  right: 21px; 
  width: 90px;
  max-width: 350px;  
  transition: all 1s;
  height: 50px;
  background: white;
  box-sizing: border-box;
  border-radius: 25px;
  border: 4px solid white;
  padding: 5px;
  outline: 0;
}

.fa {
  box-sizing: border-box;
  padding: 10px;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 5px;
  right: 20px;
  border-radius: 50%;
  color: black;
  text-align: center;
  font-size: 1.2em;
  transition: all 1s;
}

input:focus{
  outline: 0;
}

input:hover{
  width: 350px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav>
    <div class=logo>
        <img src="images/logoicon.png" alt="sunce">
        <img src="images/logotext.png" alt="outdoors" id="logotext">
    </div>
    <ul class="nav-ul">
        <li><a href="#">Destinations</a></li>
        <li><a href="#">Travel style</a></li>
        <li><a href="#">Trabel deals</a></li>
        <li><a href="#">Gear</a></li>
    </ul>
    <div class="forma">
        <input type="search" placeholder="search" class="pretraga">
        <i class="fa fa-search"></i>
    </div>
</nav>

你可以在这里查看

注意：@media在桌面上更好地查看您必须使用规则为移动设备编写代码

推荐阅读