Html <h1>, <h2>, <h3>... 标签,在段落中内嵌 (<p>)
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/2200227/
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>, <h2>, <h3>... tags, inline within paragraphs (<p>)
提问by Alextronic
I'm trying to have <hx>
tags inside paragraphs, like:
我正在尝试<hx>
在段落中添加标签,例如:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar tincidunt neque, at blandit leo mattis vitae. Cras <h2>placerat</h2> justo vel risus porta cursus. Nullam eget sem nibh. Sed <h3>mattis</h3> facilisis rhoncus. Morbi sit amet nisl lectus.</p>
But I always get a line break before each one of them, even applying all these, and combinations of the following declarations:
但我总是在每一个之前换行,甚至应用所有这些,以及以下声明的组合:
h1, h2, h3, h4, h5, h6 {
display:inline !important;
text-transform:none;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
clear:none;
color:inherit;
margin:0;
padding:0;
}
So what can I do so that the tags go unnoticed inline with the text? Right now I get something like
那么我该怎么做才能使标签在文本中不被注意呢?现在我得到类似的东西
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar tincidunt neque, at blandit leo mattis vitae. Cras
placerat justo vel risus porta cursus. Nullam eget sem nibh. Sed
mattis facilisis rhoncus. Morbi sit amet nisl lectus.
Lorem ipsum dolor 坐 amet,consectetur adipiscing 精英。Aliquam pulvinar tincidunt neque,在 blandit leo mattis vitae。克拉斯
placerat justo vel risus porta cursus。Nullam eget sem nibh。sed
马蒂斯 facilisis rhoncus。Morbi 坐在 amet nisl lectus。
Thank you
谢谢
PS: btw I'm using blueprint framework theme for drupal.
PS:顺便说一句,我正在为 drupal 使用蓝图框架主题。
回答by SLaks
You're misusing the header tags.
你在滥用标题标签。
You should use <span>
tags with CSS classes.
您应该使用<span>
带有 CSS 类的标签。
I tried it out, and what's happening is that when Firefox sees an invalid <h1>
tag inside the <p>
, it automatically closes the <p>
tag. You can clearly see this in Firebug.
我试了一下,结果是当 Firefox 在 中看到无效<h1>
标签时<p>
,它会自动关闭该<p>
标签。您可以在 Firebug 中清楚地看到这一点。
回答by user2091539
Just place a h2 tag at the starting of paragraph.
For eg.
<p>The p tags are automatically breaking as soon as the html parser reaches the hx tags. if you really want to do this you must close the p tag before the hx tag. then set p and hx to display inline!</p>
is the para and we want automatically breaking enclosed with h1 tag..
只需在段落开头放置一个 h2 标签。例如。
<p>The p tags are automatically breaking as soon as the html parser reaches the hx tags. if you really want to do this you must close the p tag before the hx tag. then set p and hx to display inline!</p>
是 para 并且我们想要自动打破用 h1 标签包围..
<p><h2></h2>The p tags are <h1>automatically breaking</h1> as soon as the html parser reaches the hx tags. if you really want to do this you must close the p tag before the hx tag. then set p and hx to display inline!</p>
but we cant achieve the style we gave to p tag as p tag automatically breaks.
但是我们无法实现我们给 p 标签的样式,因为 p 标签会自动中断。
Note: h1 tag should be styled as
注意:h1 标签的样式应为
h1{ display:inline; !important}
回答by meagar
The <p>
tag can only contain inline elements. The header tags are block-level elements, and cannot go inside <p>
tags even when you style them to display inline.
该<p>
标签只能包含内联元素。标题标签是块级元素,<p>
即使您将它们设置为内联显示样式,也不能进入标签内部。
They're semantically incorrect given this usage anyways - paragraphs shouldn't have headers randomly floating around inside them. Consider proper use of <em>
and <strong>
tags, or if they're really not what you're trying to describe, use <span>
tags with specific classes.
无论如何,鉴于这种用法,它们在语义上是不正确的 - 段落不应在其中随机浮动标题。考虑正确使用<em>
和<strong>
标记,或者如果它们确实不是您要描述的内容,请使用<span>
具有特定类的标记。
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
pulvinartincidunt neque, at blandit leo mattis vitae.
Cras <em>placerat</em> justo vel risus porta cursus. Nullam eget
sem nibh. Sed <strong>mattis</strong> facilisis rhoncus. Morbi sit
amet nisl lectus.</p>
回答by Nox
"H" tags are for headings, titles, to show a breaking point in a topic. "p" tags are to control lengths of text together, each separate paragraph will get a "p". "span" tags should only go inside of "p" tags, they are used to show emphasis within the paragraph, but they are limited when it comes to css styling. Unfortunately you must follow the html structure of these tags, otherwise you will have something different on every browser.
“H”标签用于标题,标题,以显示主题中的断点。“p”标签用于控制文本的长度,每个单独的段落都会得到一个“p”。"span" 标签应该只放在 "p" 标签内,它们用于在段落中显示重点,但在 css 样式方面受到限制。不幸的是,您必须遵循这些标签的 html 结构,否则您将在每个浏览器上看到不同的东西。
回答by NawaMan
SLaks is right. You should not use heading in paragraph. However, if you really needed it (in case it is written by someone else). You can solve the problem by setting p
to be inline too. That will work.
SLaks 是对的。你不应该在段落中使用标题。但是,如果您确实需要它(以防它是由其他人编写的)。您也可以通过设置p
为内联来解决问题。那可行。
回答by AlexMorley-Finch
The p tags are automatically breaking as soon as the html parser reaches the hx tags. if you really want to do this you must close the p tag before the hx tag. then set p and hx to display inline!
一旦 html 解析器到达 hx 标签,p 标签就会自动中断。如果你真的想这样做,你必须在 hx 标签之前关闭 p 标签。然后设置 p 和 hx 以显示内联!