Question

在下面链接的页面中，<section>中有两个<header>，其组合宽度为100％。左侧20％，粉红色<section>，右侧80％，绿色<section>，没有边框，边距或填充。

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

我知道这一点，因为当我向左边给出一个负边距，粉红色<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。

这种对空格的处理是标准布局和内联内容的副产品 - 如果你使用浮点数，就像在other answer中回答的那样，空格不应该产生影响。这是HTML / CSS的一个功能。还有other threads已经讨论过相同的内容。

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

摆脱内联块元素之间的空白
为#input，＃logo

Answer 2

<section>是一个块元素，不会在不使用float的情况下并排显示;

试试这个：

#logo { float: left; }

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

2 个答案: