如何用窗口大小調整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>  <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>  <div class="container-fluid">  <div class="row">  <div class="col-sm-3"> Example </div>  <div class="col-sm-6">  <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>  <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的窗體寬度？

回答

相關問題