Кнопка поиска не масштабируется с остальной панелью поиска

Question

Я новичок во всем 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>

Я пытался изменить отступы, расположение или даже высоту, но, похоже, ничего не работает. Я думаю, что мне нужно добавить еще одну строку кода, но я не уверен, что это будет.

Вот что происходит:

Изображение / Imgur

Как вы можете видеть, кнопка не остается внутри самой панели, как должна.

Answer 1

Вроде Dejan.SI не понял, в чем проблема. Будьте осторожны, вы ставите вершину в относительный класс .search-pos, он не работает!

Я копирую ваш код в CodePen и думаю, что проблема в другом классе или, возможно, в вашем $search.pos классе

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

(я заменяю значок шрифта на img, но он такой же)

Скажите, удовлетворяет ли вас этот код!

Answer 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;
}

Дайте мне знать, поможет ли вам это решение.

Answer 3

Попробуйте поставить код, который обрабатывает наведение после указанных элементов:

.search-box:hover>.search-txt

должно идти после

.search-txt

также

.search-box:hover>.search-btn

должно следовать после

.search-btn

Надежда, которая помогает гарантировать, что эффекты при наведении работают должным образом.

Также нет CSS property, например float: center;