25

我试图在结束 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>
4

6 回答 6

34

所以如果你有：

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

于 2012-04-25T16:14:49.617 回答
6

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

于 2012-04-25T16:11:49.277 回答
0

如果您还可以显示您的 HTML，那就更容易了。我现在只是猜测。

h1.start {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 28px;
margin: 0;
display: inline-block;
width: 200px;
}
于 2012-04-25T16:12:22.450 回答
0

将您的 CSS 更改为以下内容：

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

h1.start {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 28px;
margin: 0;
width: 200px;
float: left;
}
于 2012-04-25T16:35:43.187 回答
0

在 CSS 中创建具有所需属性和值的新标签，或编辑现有标签（例如：.address）。然后将您想要内联的文本放在该标签下，就是这样。

之后，代码应如下所示：

containerIntro h1,

containerIntro address //(in our case) 

{display: inline;}
于 2013-12-20T00:44:59.633 回答
-1

您可以用最简单的方式在 ONE LINE中实现这一目标

如果您不只严格使用 h1 和 p 并且想要实现此目的：

标题下面是...之后的文本，将您的 html 更改为：

html:

<p><b="seems-h1">Headline</b>the text right after....</P>

然后在class的帮助下增加css中b的字体大小，看起来像h1

CSS：

.seems-h1{font-size: 32px;}

我认为这是最简单的方法，可能效率不高，如果您想快速完成工作，请使用。

于 2021-09-23T16:18:38.907 回答