html - 不存在但存在的边距导致元素下降到新行，因为组合宽度 >100%

Question

在下面链接的页面中，有两个 <section> s 在 <header>它们的组合宽度为 100%。向左 20%，粉红色 <section>右边 80%，绿色 <section>并且没有边框、边距或填充。

除了两个部分似乎有空白导致权利，绿色的部分掉到新的一行。

我知道这一点是因为当我给左边一个负的 margin-right 时，粉红色 <section>右边，绿色<section>然后它们适合在线上。

这个边距是从哪里来的？我怎样才能在不讨厌地应用负边距的情况下摆脱它？

另外，换句话说，我怎样才能得到两个 <section>是否适合一行内联？

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

Answer 1

空格。

如果你不是这个:

<header id="header">
    <section id="logo">
        <!--<img data-gif="data.gif" data-png="data.png" src="logo.svg" />-->
    </section>
    <section id="input">
        <input id="searchInput" type="text" name="search" autocomplete="off" />
    </section>
</header>

这样做:

<header id="header">
    <section id="logo">
        <!--<img data-gif="data.gif" data-png="data.png" src="logo.svg" />-->
    </section><section id="input">
        <input id="searchInput" type="text" name="search" autocomplete="off" />
    </section>
</header>

它可以并排显示。参见 proof in jsfiddle .

这种对空格的处理是标准布局和内联内容的副产品 - 如果您使用 float 代替，如 other answer 中的回答，空格不应该有影响。这是 HTML/CSS 的一个特性。还有other threads讨论了相同的问题。

简而言之，有两种方法可以解决这个问题:

• 去除行内 block 元素之间的空白
• 切换到使用 float:left 而不是 #input、#logo 的内联 block