html - 使两个具有内联尺寸的元素

Question

我试图使标题中的两个元素，粉色部分和绿色部分，内联（在一行中，而不是像当前绿色部分那样换行）。

但是，我不能使用 display:inline; 因为物品需要有宽度。

我怎样才能实现这两个元素都是内联的并保持它们的宽度？

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

Answer 1

The inline-block solution:

#logo {
    width: [WIDTH1]%;
    min-width: 225px;
    background: pink;
}

#input{   
    width: [WIDTH2]%;
    background: green;
}

#input,#logo {
    display: inline-block;
    height: 100%;
    vertical-align:top;
}

Where [WIDTH1] + [WIDTH2] = 100%. For this to work, you need to delete the whitespaces between the two elements.

So not like now:

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

But instead:

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

Answer 2

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

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

Answer 3

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

#input{width:77%;} 

Answer 4

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

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