无论屏幕分辨率如何，如何使搜索框自动定位和自动调整大小？

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;
}