H1标签和P标签在同一条线上？

Question

我试图在关闭H1标签之后在P标签内放置一些文本,如下所示:

标题这里是正确的文字....

但我无法让它发挥作用.我制作了这个CSS,但也许有些东西丢失了？

CSS:

p.start {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 28px;
    text-align: justify;
    display: inline;
}

h1.start {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 28px;
    margin: 0;
    display: inline-block;
}

HTML:

<div id="containerIntro">
    <h1 class="start">Headline </h1>
    <p class="start">Text......</p>
</div>

Answer 1

所以如果你有:

<div id="containerIntro">
<h1>Headline</h1>
<p>And here the text right after...</p>
</div>

你的CSS必须看起来像这样:

#containerIntro h1,
#containerIntro p {
    display: inline;
    vertical-align: top;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 28px;
}

见http://jsfiddle.net/F3Bcd/3/.

Answer 2

两个<p>和<h1>元素是块级-它们占据其容器的完整宽度的装置。您可以尝试将两个元素都向左浮动。这会将它们彼此堆叠到左侧，并将它们转换为内联元素。