CSS H1标签和P标签在同一行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10319483/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
H1 tag and P tag on the same line?
提问by 3D-kreativ
I'm trying to place some text inside the P tag after the closing H1 tag like this:
我试图在关闭 H1 标签之后在 P 标签内放置一些文本，如下所示：
HeadlineAnd here are the text right after....
标题这是紧随其后的文字......
But I can't get it to work. I made this CSS, but something is perhaps missing?
但我无法让它工作。我制作了这个 CSS，但可能缺少某些东西？
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:
HTML：
<div id="containerIntro">
<h1 class="start">Headline </h1>
<p class="start">Text......</p>
</div>
回答by Olly Hodgson
So if you had:
所以如果你有：
<div id="containerIntro">
<h1>Headline</h1>
<p>And here the text right after...</p>
</div>
Your CSS would have to look something like this:
你的 CSS 必须看起来像这样：
#containerIntro h1,
#containerIntro p {
display: inline;
vertical-align: top;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 28px;
}
回答by Surreal Dreams
Both <p>and <h1>tags are block level tags - that means they take up the complete width of their container. You can try floating both elements to the left. This stacks them up on each other to the left side and also converts them to inline elements.
这两个<p>和<h1>标签是块级标签-这意味着他们采取了他们的容器的整个宽度。您可以尝试将两个元素都向左浮动。这会将它们彼此堆叠到左侧，并将它们转换为内联元素。
回答by Onur Topal
it would be more easy if you can also show your HTML. I am just guessing right now.
如果您还可以显示您的 HTML，那就更容易了。我现在只是猜测。
h1.start {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 28px;
margin: 0;
display: inline-block;
width: 200px;
}
回答by Firoz Ansari
Change your CSS to something like this:
将您的 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;
}
回答by Marius
Create a new tag in CSS with the desired attributes and values or edit an existing one (ex: .address). Then put the text you want to be inline under that tag and that's it.
在 CSS 中创建一个具有所需属性和值的新标签或编辑现有标签（例如：.address）。然后将您想要嵌入的文本放在该标签下，就是这样。
After that the code should look like this:
之后，代码应如下所示：
containerIntro h1,
containerIntro address //(in our case)
{display: inline;}
