Question

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

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

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

这将呈现如下（Stackoverflow不支持此功能，因此请将粗体文本设为标题）

第1部分 返回页首

这是一切正常和花花公子，正如我想的那样，问题出现在其他地方我使用标题的位置，例如在以下上下文中。 （请注意，这不是天气或不使用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-render，但重点是标题扩展到其旁边浮动的div区域。

我该怎么做才能将其包装在包含div ？

中

修改 我已经创建了代码的小提琴，但错误不会发生在那里。不知道发生了什么。 http://jsfiddle.net/nefGZ/

Answer 1

我相信我找到了问题。

如果您检查Chrome上的标题（编辑为HTML），您将获得以下内容：

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

所有那些阻止自动换行的 。

按问题编辑编辑：始终检查您的复制粘贴文本，尤其是从PDF或Word粘贴时。

Answer 2

放一个

display：inline-block

H1上的风格，我认为你会没事的

设置为内联的标题元素在容器div之外扩展

2 个答案: