Как расположить результаты div ниже поискового ввода с такой же шириной ввода? - PullRequest
Новая
       6

Как расположить результаты div ниже поискового ввода с такой же шириной ввода?

0 голосов
/ 05 мая 2018

У меня есть окно поиска, которое показывает некоторые результаты при наборе.

Вот статический пример: 

<form method="GET" class="my-form">
    <div class="search-wrapper">
        <span>
            <input  type="search" class="search-query" placeholder="Search">       </span>
        <span>
            <input type="submit" value="search" class="search" >
        </span>
        <div class="results">
            <ul>
                <li>first</li>
                <li>second</li>
                <li>third</li>
            </ul>
        </div>
    </div>
</form>

CSS: 

.my-form{width:100%}

.search-wrapper{
    width: 50%;
    margin: 0 auto;
    background: #000;
    display: table;
    position:relative;
    padding:2%
}

span{display:table-cell;margin-top:10%}

span:first-of-type{width:75%}

.search-query{
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    padding-left: 3%;
    width:100%
}

.search{
    background: #ea7d20;
    border-radius: 25px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
   width:100%
}

.results{
    width:75%;
    background:#888;
    color:#fff;
    position:absolute;
    left:0;
    top:100%
}

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

Вот предварительный просмотр: https://jsfiddle.net/nner02rk/4/

Ответы [ 2 ]

0 голосов
/ 05 мая 2018

Обновил вашу скрипку, просто оставив ширину класса результата равной 100%. 

.results{
  margin-left: 4%;
  width:70%;
}

https://jsfiddle.net/nner02rk/8/

0 голосов
/ 05 мая 2018

Ваш results находится внутри search-wrapper. Но на этот div влияет отступ в 2%. Вот почему ваши ценности не отвечают, как вы ожидаете их. 

.results{  
  width: 70%;
  background: #888;
  color: #fff;
  position: absolute;
  left: 3.5%;
  top: 100%;
  }

Чтобы проверить выравнивание, вы можете установить верхнее значение на 71%

Надеюсь, это поможет:) 

.my-form{width:100%}
.search-wrapper{
    width: 50%;
    margin: 0 auto;
    background: #000;
    display: table;
    position:relative;
    padding:2%
}
span{display:table-cell;margin-top:10%}
span:first-of-type{width:75%}
.search-query{
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    padding-left: 3%;
    
    width:100%
}
.search{
    background: #ea7d20;
    border-radius: 25px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
   width:100%
}
.results{  
  width: 70%;
  background: #888;
  color: #fff;
  position: absolute;
  left: 3.5%;
  top: 100%;
  }
<form method="GET" class="my-form">
  <div class="search-wrapper">
	  <span>
      <input  type="search" class="search-query" placeholder="Search">       </span>
		<span>
      <input type="submit" value="search" class="search" >
    </span>
		<div class="results">
		  <ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
      </ul>
		</div>
	</div>
</form>
...