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

我对使用响应公式的响应式设计存在问题。它工作的很好，但不适合搜索栏，它只是一个输入框和一个显示按钮：内联。似乎他们之间没有任何差距或填充，这就是为什么公式不起作用的差距。但那是我的猜测，谁能告诉我如何解决它？现在，当我把％的它扩展，但经过一段时间的按钮跳下来后..带输入框和按钮的流体布局，如何解决？

我的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/

来源

2013-12-11 Sanna Bergström

我不是100％确定你想要什么。至于你的按钮向下移动..如果你申请一个最小宽度：一些％;或min-width：somepx;当您缩放到较小的分辨率时，它不会向下移动。

来源

2013-12-11 18:09:30 JayD

我想要的是流体布局，这是真正的响应。因此，将对象的公式与其内容的宽度分开。像这里一样，输入框为500像素，包装为960像素，所以500/960 = 52.08333333333333％。这应该完美地缩放任何大小的窗口.. –

，我必须这样做inpubox，填充和按钮..它应该工作，但它dosent，我认为它是因为输入框和按钮之间的差距，没有我把任何保证金或填充..所以我需要帮助修复，所以它的工作原理。我不知道你是否可以取消之间的差距或什么可能做的，但我不知道如何解决它，这就是我需要帮助=） –

如果您希望您的设计具有响应性，您需要将所有宽度，边距和填充更改为EM或％（在这种情况下，百分比将会很好）。记住每个元素应具有宽度+填充+边距= 100％的总和，并且100％是父元素宽度的100％。

来源

2013-12-11 18:31:45 user3037493

是的我知道，我在路上......但这部分剂量工作与流体布局公式..所以我需要帮助修复那部分？ :) –

即时对不起，你确实在你的问题中说！我使用inline-flex作为#searchWrapper的显示效果很好：\t＃searchWrapper {0}背景颜色：＃854242; \t宽度：100％; \t display：inline-flex; \t} – user3037493

文档：https：//developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes＆http://www.w3schools.com/cssref/css3_pr_box-flex.asp ...注意这不支持IE9及更早版本（呃IE总是会毁掉所有前端开发!!!>：） – user3037493

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

回答

相关问题