Как отрегулировать ширину формы в css с изменением размера окна?

У меня есть следующий вид:Как отрегулировать ширину формы в css с изменением размера окна?

<form id="search_form" class="navbar-form navbar-left" method="GET" action="/search/"> 
    <div class="input-group" id="search_form_container"> 
     <input type="text" id="search_box" class="form-control" name="search" placeholder="Search" value="{% block srch_val %}{% endblock %}"> 
     <span class="input-group-btn"> 
      <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button> 
     </span> 
    </div> 
</form>

CSS

#search_form { 
    position: absolute; 
    left: 180px; 
}

Я хочу, чтобы создать поисковую форму, которая будет регулировать его ширину в зависимости от ширины окна при изменении размера. Например, пожалуйста, проверьте www.amazon.com

Как я могу это достичь?

источник

2016-12-31 MiniGunnR

Вы могли бы попробовать реализовать Bootstrap, так как их ряд и цв стиль макет может справиться с этим хорошо.

Вот как ваша страница может выглядеть ...

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Example Site</title> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/ bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
</head> 
<body> 
    <!-- Wrapper --> 
    <div class="container-fluid"> 
     <!-- Row --> 
     <div class="row"> 
      <!-- Col 1 --> 
      <div class="col-sm-3"> 
       Example 
      </div> 
      <!-- Col 2 --> 
      <div class="col-sm-6"> 
       <!-- Form --> 
       <form id="search_form" class="navbar-form navbar-left" method="GET" action="/search/"> 
        <div class="input-group" id="search_form_container"> 
         <input type="text" id="search_box" class="form-control" name="search" placeholder="Search" value="{% block srch_val %}{% endblock %}" style="width: 100%"> 
         <span class="input-group-btn"> 
          <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button> 
         </span> 
        </div> 
       </form> 
      </div> 
      <!-- Col 3 --> 
      <div class="col-sm-3"> 
       Example 
      </div> 
     </div> 
    </div> 
</body> 
</html>

источник

2016-12-31 09:46:16

Flexbox!

Это чистая собственность css, поддерживаемая давно. Хорошо, что вам абсолютно не нужна отдельная структура, чтобы сделать отзывчивый html! Вы можете использовать обычный CSS:

#search_form { 
    position:relative; 
    width:100%; 
    padding:0px 5% 0px 180px; 
    box-sizing:border-box; 
} 

#search_form_container { display:flex; flex-direction:row; } 

#search_form input[type=text] { flex-grow:1; } 
#search_form_container > span { flex-grow:0; }

Пожалуйста, обратите внимание, что точные пространственные смещения и ширину вы должны определить самостоятельно, основываясь на вашей конструкцию и т.д. Но идею Flexbox и как это помогает сделать реагирующую HTML элементов видимый.

#search_form { 
 
    position:relative; 
 
    width:100%; 
 
    padding:0px 5% 0px 180px; 
 
    box-sizing:border-box; 
 
} 
 

 
#search_form_container { display:flex; flex-direction:row; } 
 

 
#search_form input[type=text] { flex-grow:1; } 
 
#search_form_container > span { flex-grow:0; }

<form id="search_form" class="navbar-form navbar-left" method="GET" action="/search/"> 
 
    <div class="input-group" id="search_form_container"> 
 
     <input type="text" id="search_box" class="form-control" name="search" placeholder="Search" value="{% block srch_val %}{% endblock %}"> 
 
     <span class="input-group-btn"> 
 
      <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button> 
 
     </span> 
 
    </div> 
 
</form>

источник

2016-12-31 10:13:47 linderman

Как отрегулировать ширину формы в css с изменением размера окна?

ответ

Смежные вопросы