HTML/CSS 显示：内嵌问题

发布于 2024-12-10 00:14:21 字数 906 浏览 1 评论 0原文

我的 HTML 文档中有多个文本段落。此外，在不同的地方，一些文本被包裹在

标签中，这意味着应用某些字体效果。在我的 CSS 中，h6 标记设置为 display:inline;，因此该段落可以连续运行而不会换行。这除了适用于每个页面上使用的 h6 的第一个实例：第一个元素之前总是有一个换行符。有谁知道为什么/如何防止这种情况？

CSS:

h6 {
    font-family:'Courier New',Courier,'Nimbus Mono L',monospace;
    font-size:125%;
    display:inline;
}

HTML:

As expected, not a lot was accomplished (in this plane) over a
five-day weekend when much of it was devoted tot he college
process. However, I'm down to only a handful of HTML-validation
errors. A couple of which are going to be particularly problematic,
dealing with my new <h6>Lytebox JavaScript</h6> I talked about
earlier: to enable Lytebox on an image, you give it a CSS tag
<h6>data-lyte-options</h6>...

h6 的第二个本质工作正常，但第一个之前有一个换行符。

原文

I have multiple paragraphs of text in an HTML document. Also, at various points, some of the text is wrapped in <h6></h6> tags, which is meant to apply certain font effects. In my CSS, the h6 tag is set to display:inline; so the paragraph keeps going continuously without a line break. This works except for the first instance of h6 on each page it is used: there is always a line break before the first element. Does anyone know why/how to prevent this?

CSS:

h6 {
    font-family:'Courier New',Courier,'Nimbus Mono L',monospace;
    font-size:125%;
    display:inline;
}

HTML:

As expected, not a lot was accomplished (in this plane) over a
five-day weekend when much of it was devoted tot he college
process. However, I'm down to only a handful of HTML-validation
errors. A couple of which are going to be particularly problematic,
dealing with my new <h6>Lytebox JavaScript</h6> I talked about
earlier: to enable Lytebox on an image, you give it a CSS tag
<h6>data-lyte-options</h6>...

The second essence of h6 works fine, but there is a line break before the first.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甜妞爱困 2024-12-17 00:14:21

标题元素不能包含在段落内，因为本质上它们被视为块级元素，因此浏览器在到达像标题这样的块级元素时会中断段落。

您的特定 HTML 会被浏览器更改为：

<p>
As expected, not a lot was accomplished (in this plane) over a
five-day weekend when much of it was devoted tot he college
process. However, I'm down to only a handful of HTML-validation
errors. A couple of which are going to be particularly problematic,
dealing with my new
</p>                           <!-- browsers end a paragraph here!!!!! -->
<h6>Lytebox JavaScript</h6>
I talked about earlier: to enable Lytebox on an image, you give it a CSS tag
<h6>data-lyte-options</h6>
...
<p></p>

我发现在 HTML 规范中引用这一事实：

P 元素代表一个段落。它不能包含块级元素（包括 P 本身）。

和另一个讨论块级元素的参考：

样式表提供了指定任意元素呈现的方法，包括元素是否呈现为块或内联。在某些情况下，例如列表元素的内联样式，这可能是合适的，但一般来说，作者不鼓励以这种方式覆盖 HTML 元素的常规解释。 p>

解决方案？

问题是您将标题用作通常的段落文本（具有自己的样式）。您应该使用 SPAN 元素来使您的 HTML 有效。

如果您只想将文本格式化为代码显示，那么您还可以使用 CODE 元素，该元素应该完全用于此目的。

Heading elements can't be contained inside paragraphs, because inherently they're treated as block-level elements hence browsers break paragraphs when they get to a block-level element like heading.

Your particular HTML gets changed to this by browsers:

<p>
As expected, not a lot was accomplished (in this plane) over a
five-day weekend when much of it was devoted tot he college
process. However, I'm down to only a handful of HTML-validation
errors. A couple of which are going to be particularly problematic,
dealing with my new
</p>                           <!-- browsers end a paragraph here!!!!! -->
<h6>Lytebox JavaScript</h6>
I talked about earlier: to enable Lytebox on an image, you give it a CSS tag
<h6>data-lyte-options</h6>
...
<p></p>

I found a reference to this fact in HTML specification:

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

And another reference that talks about block-level elements:

Style sheets provide the means to specify the rendering of arbitrary elements, including whether an element is rendered as block or inline. In some cases, such as an inline style for list elements, this may be appropriate, but generally speaking, authors are discouraged from overriding the conventional interpretation of HTML elements in this way.

Solution?

The problem is that you're using headings as usual paragraph text (with its own style). You should be using SPAN elements instead to make your HTML valid.

If all you'd like to do is to format your text to be displayed as code then you can also use CODE element which should be used exactly for this purpose.

回复收藏 0 原文

薄荷→糖丶微凉 2024-12-17 00:14:21

您希望元素内联并应用特殊字体格式，对吧？然后你可以将它们包含在“span”标签中

As expected, not a lot was accomplished (in this plane) over a five-day weekend when much of it was devoted tot he college process. However, I'm down to only a handful of HTML-validation errors. A couple of which are going to be particularly problematic, dealing with my new <span>Lytebox JavaScript</span> I talked about earlier: to enable Lytebox on an image, you give it a CSS tag <span>data-lyte-options</span>

span { font-family:'Courier New',Courier,'Nimbus Mono L',monospace;font-size:125%;}

You want the element to be inline and apply special font formatting right?? Then you can enclose them in a 'span' tag

As expected, not a lot was accomplished (in this plane) over a five-day weekend when much of it was devoted tot he college process. However, I'm down to only a handful of HTML-validation errors. A couple of which are going to be particularly problematic, dealing with my new <span>Lytebox JavaScript</span> I talked about earlier: to enable Lytebox on an image, you give it a CSS tag <span>data-lyte-options</span>

span { font-family:'Courier New',Courier,'Nimbus Mono L',monospace;font-size:125%;}

回复收藏 0 原文