使两个元素的尺寸内联

Question

我正试图使标题中的两个元素，粉红色部分和绿色部分，内联(在一行中，而不是像绿色部分目前那样包装到新行)。

但是，我不能使用display:inline;因为项目需要有一个宽度。

我怎样才能使这两个元素都内联并保持它们的宽度?

元素所在页面:https://dl.dropboxusercontent.com/u/270523/help/new.html

Answer 1

内联块解决方案:

#logo {
    width: [WIDTH1]%;
    min-width: 225px;
    background: pink;
}
#input{   
    width: [WIDTH2]%;
    background: green;
}
#input,#logo {
    display: inline-block;
    height: 100%;
    vertical-align:top;
}

其中[WIDTH1] + [WIDTH2] = 100%。要做到这一点，您需要删除两个元素之间的空白符。

所以不像现在:

<section id="logo"></section>
<section id="input">
    <input id="searchInput" type="text" name="search" autocomplete="off">
</section>

,而是:

<section id="logo"></section><section id="input">
    <input id="searchInput" type="text" name="search" autocomplete="off">
</section>

Answer 2

您已经将浮动设置为#input部分，而不是#logo部分。

#logo {
width:20%;
float: left;
}

Answer 3

你的section输入正在下降，因为它有额外的宽度，让它在77%左右，然后它将为你工作。

#input{width:77%;} 

Answer 4

首先，它真的很好，你使用html5标签，这对你有好处。在我看来，最简单的方法是对header中的所有元素使用float，但要记住clear:both父标记。

下面是修改代码的演示:http://jsfiddle.net/bartekbielawa/WgtAP/