时间戳

首页 > 解决方案 > 用于样式的通用内联和块级 HTML 元素

html - 用于样式的通用内联和块级 HTML 元素

问题描述

是否有一个 HTML 元素可以用来包装其他内容以便在不影响布局的情况下设置样式（例如设置背景颜色）而不事先知道内容是否内联？

例如考虑这个 HTML：

<p>This is a paragraph with some text in it</p>

<div>
  <p>Some text</p>
</div>

如果我想Some text通过这样包裹它来制作黄色：

<p>This is a paragraph with <yellow>some text</yellow> in it</p>

<yellow>
<div>
  <p>Some text</p>
</div>
</yellow>

那我应该用<yellow>什么？

您可能会说“使用”，但即使使用<div>.也会破坏段落。display: inline

我能得到的最接近的是<span>with display: inline-block。

.yellow {
  background-color: yellow;
  display: inline-block;
}
<p>This is a paragraph with <span class="yellow">some text</span> in it</p>

<span class="yellow">
<div>
  <p>Some text</p>
</div>
</span>

然而，这确实会影响布局（它将项目符号移动到底部）：

.yellow {
  background-color: yellow;
  display: inline-block;
}
<div style="width: 100px">
<ul>
  <li><span class="yellow">some text blah blah blah</span></li>
</ul>
</div>

有没有真正不影响布局的元素？

标签： htmlcss

解决方案

您可以将样式元素默认设置为块，并添加一个 css 声明，当它是块级元素的子元素时使其内联。

.yellow {
  background-color: yellow;
  display: block;
}

p > .yellow,
li > .yellow {
  display: inline;
}
<p>This is a paragraph with <span class="yellow">some text</span> in it</p>

<span class="yellow">
<div>
  <p>Some text</p>
</div>
</span>

<div style="width: 100px">
<ul>
  <li><span class="yellow">some text blah blah blah</span></li>
</ul>
</div>

我提出的另一个建议是使用mark标签而不是span，因为它在语义上更适合突出显示（如果这是您的实际用例）。

推荐阅读