无法从p标签内的span元素中移除下划线

Question

基本上，我有一个在p标签中的span，我使用CSS来给p添加下划线，但是我无法从 span中删除下划线。以下是一些代码示例：

p{text-decoration:underline;} span{text-decoration:none;}

<p>Hello World <span> I'm spanning... </span> </p>

所有的文字都被下划线标记了。你能帮我一下吗？

- Saul Solis

---

<p>这只是一个示例文本，用于演示我的问题</p> - Saul Solis

移除 <p> 标签的文本装饰。 - Ji_in_coding

p span {text-decoration:none;display:inline-block} 你需要重置span元素的块格式上下文。 - G-Cyrillus

Answer 1

在 <span> 上使用 display: inline-block;。请查看下面的示例：

p {
  text-decoration: underline;
}

span {
  text-decoration: none;
  display: inline-block;
}

body {margin: 20px;}

<p> This is just <span> a sample text </span> that will demostrate my issue </p>

- Saurav Rastogi

Answer 2

你的看法是错误的。由于 p 元素有下划线，整个元素都会有下划线。你需要反转你的标记以在你想要的地方给 span 添加下划线。类似这样的代码：

span {
 text-decoration:underline;
} 

<p>
 <span>This is just </span>a sample text<span> that will demonstrate my issue</span>
</p>

- Dryden Long

Answer 3

把事情搞个反过来，将你想要加下划线的文本内容用标签包裹起来，并对这些内容添加样式:

<p> <span>This is just</span> a sample text <span>that will demostrate my issue</span> </p>

https://plnkr.co/edit/BQyJU0dPzmZaAVEMrKkL?p=preview

- LGLab