-4

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

这是代码： 

<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 上看到它时，搜索框的位置没有改变。我只想修复框位置，而与不同屏幕尺寸的屏幕分辨率无关。

我已经更改了代码，它工作得更好一点，除了按钮“开始”按钮在这里打破了线路并向下移动。我希望它在同一行。请检查代码： 

<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>
4

2 回答 2

0

Take a look at this: http://jsfiddle.net/4bPuT/1/

If I understand correctly, what you could do in an absolute positioned input is to set both left and right css attributes to 0 so that it get the maximum width of the current container.

<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;
}
于 2013-09-25T12:24:13.243 回答
0

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

于 2013-09-25T12:21:06.897 回答