Блог

Я пытаюсь создать аналогичную форму поиска, такую как tripadvisors (по крайней мере, с точки зрения пользовательского интерфейса и внешнего дизайна), но у меня до сих пор есть несколько проблем. На первой фотографии показана моя панель поиска с именем класса для целей тестирования «asdf».

итак, на втором рисунке у нас есть проблема: расширяемая часть формы немного шире, чем поле поиска ввода.

На третьем изображении, если с, возникает проблема, если я попытаюсь назначить ту же ширину остальной части формы с помощью поля ввода [«текст»] формы поиска.

Ниже мой базовый код html и css.

HTML

      <div class="aboutUs">

            <div class="textFlexContainer">

             <div class="text-box">
                <h1 class="heading-primary">
                    <span class="heading-primary-main">City</span>   
                    <span class="heading-primary-sub">is where summer happens</span>   

                </h1>
              
                
                <form class="search-box" action="/search">
                  <input class="asdf" type="search" placeholder="Explore City">
                  
                    
                  <div class="search-page">
              
                    <h3>Explore City</h3>
                
              
                      <ul class="search-menu-list">
                
                      <li><a href="#">Our Daily Suggestions</a></li>
                      <li><a href="#">Shopping</a></li>
                      <li><a href="#">City Tours</a></li>
                      <li><a href="#">Restaurants</a></li>
                      <li><a href="#">Events</a></li>
                      <li><a href="#">Things to do</a></li>
                  
                    </ul>
                
              
                <h3>Recently Reviewed</h3>

              </div>
              </form>
            </div>

                  

                </div> 
                
              </div>
  

И CSS

     .search-box{
  display: block;
  position: relative;
  overflow: hidden;
  z-index:15;
  padding:2rem;
  
  
}

.asdf {
  
  width: 80%;
  padding:2rem;
  border: none;
  outline: none;
  border-bottom:2px solid white;
  margin-top:2.5rem;
  font-size: inherit;
  background-color: green;
  
 
  color: #fff;
  
}


h3{
  color:#fff;
  margin-top:2rem;
}

.search-page {


  height: fit-content;
  background-color:green;

 
  
 
  text-align: center;
  padding:4rem 0;
  transition: all 300ms ease-in-out;
 
  display: none;
 
  
}

.search-page.visible {
  display: block;
  transition: all 300ms ease-in-out;
  
  
}


.search-page .search-menu-list{
display:flex;
flex-wrap: wrap;
  align-items: center;
  justify-content: center;
 

}

.search-page  .search-menu-list li{
  list-style: none;
}

.search-page .search-menu-list li a:hover{
  transform: translateY(-1rem);

}

.search-page  .search-menu-list li a{
  display: inline-block;
  color:#fff;
  padding:5px;
  list-style: none;
  text-decoration: none;
  margin-right: 2.5rem;
  transition: all 300ms ease-in-out;
  border: solid 2px white;
  border-radius: 1rem;
  padding: 11px 13px 11px 14px;
  margin: 10px;
  
}

.aboutUs{


  display: grid;
  background-image: linear-gradient(to right  bottom, rgba(53, 170, 120, 0.8), rgba(20, 139, 102, 0.8)) ,url(../img/ch4.jpg);
    background-size: cover;
    background-position: center;
  grid-column-start: 1; 
  grid-column-end: 13; 
  grid-row-start: 2; 
  grid-row-end: 3; 
 
  
}


.textFlexContainer{
  
    display:flex;
    align-self: center;
    
    
}

.heading-primary {
  color:#fff;
  text-transform: uppercase;
}

.heading-primary-main{

display: block;
font-size: 6rem;
font-weight: 400;
letter-spacing: 3.5rem;

}

.heading-primary-sub {

  display: block;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 1.8rem;

}

.text-box {
 
  display: inline-block;

  /* This content should just be in the normal flow of the page */
  /*
    position: absolute
    top:30%;
    left:50%;
    transform: translate(-50% ,-50%);
  */
  text-align: center;
  /*  Because we're using flexbox, we can center the content both horizontally and vertically
   *  using this declaration
   */
  margin: auto;
  
  
  
 
}



Additionaly i would love if when i click on the search bar field and the form is expanding to not have the letters above the search bar to getting squeezed on the top.
  

Не совсем уверен, что вам здесь нужно, но вот исправление для изображения 3. Добавление 2 строк кода на вашу страницу .search устраняет проблему выравнивания.

     .search-page{
  height: fit-content;
  background-color:green;
  width:80%;
  text-align: center;
  padding:4rem 0;
  transition: all 300ms ease-in-out;
  display: all;
}
  

Ширина устанавливает его в соответствие с размером вводимого текста в форме. Поле margin: 0 auto; — хороший способ быстро центрировать элементы в css.

Я не вижу расширяемой части, когда тестировал ваш код, но пробовали ли вы изменить ширину, чтобы она стала маленькой, а затем сделать отступ влево, чтобы переместить расширяемую часть и выровнять ее с поиском?