html - 设置为内联的 header 元素扩展到容器 div 之外

Question

基于 www.cssgrid.net 上的 CSS 网格系统编写简单的 php/html/css 站点

我已将我的标题设置为 display: inline 以便能够在与我的部分标题同一行 上打印“返回顶部”链接。像这样:

<h2 id="section1">Section 1</h2>
<a href="#top" class="scroll small">Back to top</a>

这呈现如下(Stackoverflow 不支持这个，所以想象粗体文本是标题)

Section 1 Back to top

这一切都很好和花花公子，正如我想要的那样，问题出现在我使用 header 的其他地方，例如在以下上下文中。 (请注意，这不是天气或不使用 CSS 网格模板的问题，而是关于标题的问题。因此请不要对一般结构发表任何评论)。

<div class="container" id="main">
    <div class="row">
        <div class="eightcol" id="first-div">
            <h1>This is a header</h1>
            <p>This is a p-tag</p>
        </div>
        <div class="fourcol last" id="second-div">
            <div id="twitter">
                <p>Twitter here</p>
            </div>
        </div>
    </div>
</div>

这不会呈现正确，至少不是根据我想要的。这呈现如下模型所示:

main
--------------------------
| first-div | second-div |
| This is a header       |
| This is a | Twitter    |
| p-tag     | here       |
--------------------------

也许不是最艺术的 ascii 渲染，但重点是标题扩展到它旁边 float 的 div 区域。

我应该怎么做才能让它包裹在它的 containing div 中？

编辑: 我已经用代码创建了一个 fiddle ，但那里并没​​有发生错误。不知道发生了什么。 http://jsfiddle.net/nefGZ/

Answer 1

我相信我已经找到问题了。

如果您在 Chrome 上检查 header (编辑为 HTML)，您将得到:

<h1>HEJ&nbsp;och&nbsp;välkommen&nbsp;till&nbsp;Basårsmottagningens&nbsp;hemsida!</h1>

正是那些   阻止了自动换行。

由问题作者编辑:始终检查复制粘贴的文本，尤其是从 PDF 或 Word 粘贴时。