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规范中找到了一个提及这一事实：

P元素表示段落。它不能包含块级元素(包括P本身)。

以及讨论块级元素的另一参考资料：

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

解决办法？

问题在于，您使用的标题和通常的段落文本一样(有它自己的风格)。您应该使用SPAN元素来使您的HTML有效。

如果您想要做的就是将您的文本格式化为代码，那么您也可以使用CODE元素，该元素正是为此目的而使用的。

Answer 2

为什么不创建一个惟一的类并根据需要将它应用到您的<p>标记中呢？您提到了一些是用h6标记包装的，以应用样式。这可以用<p class="onestyle"></p>完成，但是您仍然可以使用<p></p>常规的p标记。

然后，使用您的h6，您可以让它们离开，而不是使用display:inline或do inline-block，这与all的影响几乎相同。然后根据需要对所有样式应用填充边距。

Answer 3

您希望元素是内联的并应用特殊的字体格式，对吗？然后你可以把它们用“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%;}