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

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

2 个答案: