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元素的传统解释

解？

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

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

Answer 2

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

然后使用 h6 ，您可以将它们向左浮动而不是使用display:inline或执行inline-block，这与所有情况大致相同。然后根据需要对所有样式应用填充边距。

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

Answer 4

尝试使用CSS选择器专门定位该实例。不是100％肯定这会解决它，但值得一试。

h6:first-child { display:inline; }

HTML / CSS显示：内联问题

4 个答案:

解？