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

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；当您缩放到较小的分辨率时，它不会向下移动。

Answer 2

如果您希望设计具有响应性，则需要将所有宽度、边距和内边距更改为 EM 或 %（在这种情况下可以使用百分比）。记住每个元素的总宽度+padding+margin=100%，100%就是父元素宽度的100%。