0

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

除了这两个部分似乎有一个边距导致权利，绿色的一个下降到一个新的行。

我知道这一点，因为当我给左边、粉红色<section>和右边、绿色的负边距时，<section>它们适合内联线。

这个利润是从哪里来的，我怎样才能摆脱它而不会讨厌地应用负利润？

另外，换句话说，我怎样才能让两个<section>s 嵌入一行？

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

4

2 回答 2

2

空白。

如果你不是这个：

<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>

它并排显示就好了。请参阅jsfiddle 中的证明。

这种对空格的处理是标准布局和内联内容的副产品 - 如果您改用浮点数，就像在另一个答案中回答的那样，空格应该不会产生影响。这是 HTML/CSS 的一个特性。也有其他讨论过相同的线程。

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

  • 摆脱你的内联块元素之间的空白
  • 切换到使用 float:left 而不是 inline-block 用于#input、#logo
于 2013-04-21T08:10:17.523 回答
0

<section>是一个块元素，如果不使用，将不会并排显示float；

试试这个：

#logo { float: left; }
于 2013-04-21T08:07:27.383 回答