html - 使元素更小而不是让它掉到新行

Question

在我正在开发的这个布局中，在 1124 像素和更小的宽度处，标题的绿色部分掉到新的一行。

我怎样才能让它和它的内容随着视口(viewport)宽度的减小而减小宽度，同时保持标题中的所有内容都在一行中？

现在粉色元素和绿色元素之间的比例是粉色占标题的 20%，绿色占剩余宽度的 80%。

绿色内部的输入也应该像它的父级绿色部分一样在宽度上调整得更小。

这是发生这种情况的链接:https://dl.dropboxusercontent.com/u/270523/help/new.html

根据要求，这是一个复制问题的 JSFiddle:http://jsfiddle.net/d7k43/

和基本的CSS:

#logo{
    height:100%;
    width:20%;
    min-width:225px;
    background:pink;
}
#input{
    height:100%;
    width:80%;
    background:green;    
} 

Answer 1

问题是#logo { min-width: 225px }。当 0.2X = 225px 时，X = 1125px 总宽度。

您的绿色区域仍将占总宽度的 80%，但粉红色区域的宽度不会缩小到小于 225px。所以当窗口小于1125px时，粉色区域会占总宽度的20%以上，导致绿色区域被推到新的一行。

示例:500 像素宽度的窗口:225 像素 + .8*(500 像素) = 625 像素 > 500 像素。