搜索按钮不与搜索栏的其余部分一起缩小答案

【问题标题】：Search button doesn't scale in with the rest of search bar搜索按钮不与搜索栏的其余部分一起缩小
【发布时间】：2020-04-26 12:26:29
【问题描述】：

我是整个 CSS 编码的新手，有时我会卡住。我遵循了关于如何制作动画搜索栏的在线教程，使其看起来令人愉悦。我正在为我的学校项目做一个网站，我几乎完成了只是在这里和那里添加了一些位。它是关于从 20 世纪初到今天的技术。

.search-pos {
  display: block;
  margin-left: auto;
  width: 330px;
  position: relative;
  top: -40px;
}

.search-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-55%, -55%);
  background: white;
  height: 40px;
  border-radius: 60px;
  padding: 10px;
}

.search-box:hover>.search-txt {
  width: 240px;
  padding: 0 4px;
}

.search-box:hover>.search-btn {
  background: white;
  padding: 10px;
}

.search-btn {
  color: black;
  float: center;
  width: 30px;
  height: 30px;
  border-radius: 80%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
}

.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: white;
  font-size: 14px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px;
}

<div class="search-pos">
  <div class="search-box">
    <input class="search-txt" type="text" name="" placeholder="Type to search">
    <a class="search-btn" href="#">
      <i class="fas fa-search"></i>
    </a>
  </div>
</div>

我尝试过更改填充、定位甚至高度，但似乎没有任何效果。我想我需要添加另一行代码，但我不确定它会是什么。

会发生什么：

Image / Imgur

正如您所见，按钮并没有像应有的那样留在栏本身内。

【问题讨论】：

您能解释一下哪里出了问题以及它应该是什么样子吗？还需要用float不能用flex吗？
请分享您的标头 HTML 代码。

标签： javascript html css web

【解决方案1】：

像 Dejan.S 一样，我不知道有什么问题。小心你把一个相对类的顶部.search-pos，它不起作用！

我在 CodePen 中复制了您的代码，我认为问题出在其他类或您的 $search.pos 类中

https://codepen.io/auxb/pen/WNQjjyp?editors=1100

（我用img替换了字体图标但还是一样的）

告诉我这段代码是否让你满意！

【讨论】：

【解决方案2】：

据我了解，您需要稍微更改一下 CSS。


.search-pos {
  display: block;
  margin-left: auto;
  width: 330px;
height:40px;
  position: relative;
}

.search-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-55%, -55%);
  background: white;
  height: 40px;
  border-radius: 60px;
  padding: 10px;
display:flex;
}

.search-box:hover>.search-txt {
  width: 240px;
  padding: 0 4px;
}

.search-box:hover>.search-btn {
  background: white;
  padding: 10px;
}

.search-btn {
  color: black;
  float: center;
  width: 30px;
  height: 30px;
  border-radius: 80%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
}

.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: white;
  font-size: 14px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px;
}

如果此解决方案对您有帮助，请告诉我。

【讨论】：

是的，它帮助很大。原来我只需要添加 display: flex;现在我只需要摆弄定位。谢谢！

【解决方案3】：

尝试将处理悬停的代码放在指定元素之后：

.search-box:hover>.search-txt

应该在

之后

.search-txt

还有

.search-box:hover>.search-btn

应该在之后

.search-btn

希望这有助于确保悬停效果按预期工作。

也没有CSS property如float: center;

【讨论】：