HTML/CSS 显示：内联问题

Question

我在一个 HTML 文档中有多个文本段落。此外，在不同的点，一些文本被包裹在<h6></h6> 标签中，这意味着应用某些字体效果。在我的 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的第二个精华可以正常工作，但是第一个之前有一个换行符。

Answer 1

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

您的特定 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 规范中找到了reference to this fact：

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

还有another reference 谈论块级元素：

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

解决方案？

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

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

Answer 2

为什么不创建一个独特的类并根据需要将其应用于您的<p> 标签。你提到一些包裹在 h6 标签中以应用样式。这可以使用<p class="onestyle"></p> 完成，但您仍然可以拥有<p></p> 常规p 标签。

然后使用您的 h6，您可以将它们向左浮动，而不是使用 display:inline 或使用 inline-block，效果几乎相同。然后根据需要对所有样式应用填充边距。

Answer 3

您希望元素是内联的并应用特殊的字体格式对吗？然后您可以将它们包含在“跨度”标签中

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%;}

Answer 4

尝试使用 CSS 选择器专门针对该实例。不是 100% 确定这会解决问题，但值得一试。

h6:first-child { display:inline; }