Question

新问题：

在我的页面上http://goo.gl/ t3Ofk（删除浏览器中的空间，请不要替换此处的链接，因为我不希望谷歌将此页面链接到我的网站。）当您调整浏览器大小时小于约300像素宽度的东西，Ortseingabe下面的控件以不希望的方式改变位置。无论浏览器大小如何，如何将Übersicht保留在左侧，滑块位于中间， Detail 位于右侧（按钮可能会移动）？

**Old question:**

On my page http://goo.gl/ t3Ofk (remove the space in your browser, please don't replace the link here as I don't want google to link this page to my site.) when you resize your browser the grey text fields don't match the buttons' positions.

Two questions:

 1. What do I need to change for the text fields' right borders to stay apart 2 pixels from the buttons' right borders?
 2. When you resize your browser to something smaller than about 300 pixels width, the controls below Ortseingabe change position in an undesired way. How do I keep *Übersicht* to the left, the slider in the middle and *Detail* on the right(the button may move) regardless of browser size?

Answer 1

为输入字段指定宽度为100％而不是97％。然后将该输入字段和按钮包装在div中，为该div提供10px的左右填充。

<div class="block search-bl">           
<h3><i class="pull-right" id="suchen"></i>Was suchen Sie?</h3>
<div style="padding: 0 10px;">            
    <input type="search" name="suchbegriff" id="name">
    <button class="search-button" value="Suche beginnen" name="suche" type="submit" onclick="changeAction('eingabe.php?lat=50.94567147679&amp;lon=6.97363018295688&amp;ortsangabe=Position nicht ermittelbar&amp;radius=14&amp;breite=800')">Suchen                                                                                     
    </button>  
</div>        
<p class="info-help">Hinweis: Drücken Sie die Eingabetaste statt auf Suchen zu klicken.              
</p>

使文本字段的位置匹配按钮的位置+保持控件的位置

1 个答案: