1

在 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 不支持这一点，所以想象粗体文本是标题）

第 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 渲染，但关键是标题扩展到浮动在它旁边的 div 区域。

我应该怎么做才能使它包含在其包含的 div 中？

编辑： 我用代码创建了一个小提琴，但那里没有发生错误。不知道发生了什么。http://jsfiddle.net/nefGZ/

4

2 回答 2

2

我相信我找到了问题所在。

如果您检查 Chrome 上的标头（编辑为 HTML），您将获得以下信息：

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

都是那些&nbsp;阻止自动换行的人。

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

于 2012-08-01T17:15:45.893 回答
0

放一个

显示：内联块

H1上的风格，我想你会没事的

于 2012-08-01T16:41:24.083 回答