如何使搜索框的自动位置和自动调整大小，而不考虑屏幕分辨率？

Question

我正在为我的项目创建一个响应式网站，但我坚持在主页上的搜索栏的绝对位置，这对我来说非常重要。

下面是代码：

<div class="span4"> 

<form class="well form-search" 

style="position:fixed; display:block; 

left: 50%; top: 35.5%; 

margin-top: -12.5px; 

margin-left: -150px;" 

action="{$GLOBALS.site_url}/search-results/"> 

<input type="text" class="input-medium search-query" value="I am Searching For" 

style="width: 300px; height: 25px; "> 

<button class="btn btn-large btn-primary" type="submit" > GO </button> 

</form> 

</div> 

</div> 

我搜索了很多，但使其更加看到的例子，然后换了个姿势，从像素比例，但仍然存在问题。

在桌面上看起来不错，但问题是当我在手机或iPad上看到它时，搜索框的位置没有改变。我只是想要固定盒子的位置，而不考虑不同屏幕尺寸的屏幕分辨率。

---

我已经改变了代码和它的作品多了几分精致，除了按钮这里的Go按钮被打破线和下降。我希望它在同一行。请检查代码：

<form class="well form-search" 
style="position:absolute; display:block; 

left: 47.7%; top: 29.5%; 
margin-top: -12.5px; 
margin-left: -22.5%; 


width: -webkit-calc(47.7% - 10px); 
width: -moz-calc(47.7% - 10px); 
width: calc(47.7% - 10px);" 


action="{$GLOBALS.site_url}/search-results-jobs/"> 
<input type="text" class="input-medium search-query"    
value=" I am Looking For" 

style="width: 100%; height: 25px; 

width: -webkit-calc(100% - 10px); 
width: -moz-calc(100% - 10px); 
width: calc(100% - 10px);"> 

<button class="btn btn-large btn-primary" type="submit" > GO </button></center> 
</form>                    

Answer 1

阅读这篇博客 http://bradfrostweb.com/blog/mobile/fixed-position/ 关于移动设备上的固定位置。

Answer 2

看看这个：http://jsfiddle.net/4bPuT/1/

如果我理解正确的，你可以在一个绝对位置输入做的是设置左，右的CSS属性为0，以便它获取当前的最大宽度容器。

<div class="container"> 
    <input id="search" type="text" name="search" placeholder="I resize"> 

    <!-- other content --> 

</div> 

CSS：

.container{ 
    width:100%; 
    height:auto; 
    position:relative; 
} 

.container #search{ 
    position:absolute; 
    top:0px; 
    left:0px; 
    right:0px; 
}