html - 带有输入框和按钮的流体布局，如何解决？

Question

我对使用 % 的响应式公式的响应式设计有疑问。它工作得很好但不适用于搜索栏，它只是一个输入框和一个显示的按钮:内联。如果我没有添加任何边距或填充，它们之间似乎存在差距，这就是公式不起作用的原因。但那是我的猜测，谁能告诉我如何解决它？现在，当我将 % 放入其中时，它会缩放，但过了一会儿按钮会跳下来..

我的 HTML:

<div id="searchWrapper">

 <input type="search" id="inputSearch2">
 <button id="buttonSearch2">Sök</button>

</div>

我的 CSS:

#searchWrapper{
background-color: #854242;
width: 100%;
display: inline;
}

#inputSearch2, #buttonSearch2{
    margin-top: 10px;
    margin-bottom: 20px;
}

#inputSearch2{
    width: 52.08333333333333%; /* 500px / 960px */
    margin-left: 2.60416666666667%; /* 25px / 960px */
    margin-right: ;
}

#buttonSearch2{
    width: 41.66666666666667%; /* 400px / 960px */
    margin-right: 2.60416666666667%; /* 25px / 960px */
}

对于我在这里上传的漏洞网站:http://jsfiddle.net/6Lbkg/

Answer 1

我不是 100% 确定您想要什么。至于你的按钮向下移动..如果你申请最小宽度:一些百分比；或最小宽度:somepx；当您缩放到较小的分辨率时，它不会向您移动。