Html 如何在段落中组合工具提示标记和段落边距标记？

在段落中组合工具提示标记和段落边距设置时遇到问题

这就是我目前得到的：

。工具提示{
位置：相对位置；
显示：内联块；
边框底部：1px点黑色；
}
.tooltip.tooltiptext{
可见性：隐藏；
宽度：500px；
背景色：黑色；
颜色：#fff；
文本对齐：居中；
边界半径：1px；
填充：1px0；
/*定位工具提示*/
位置：绝对位置；
z指数：1；
最高：100%；
左：50%；
左边距：-60px；
}
.tooltip:悬停.tooltiptext{
能见度：可见；
}
p、 例1{
左边距：200px；右边距：50px；
}

第1段测试这是一个工具提示工具提示显示此文本测试


第2段试验试验试验

第1段试验
这是一个工具提示
工具提示将显示此文本
测试测试

---

只需将

内部的

标记更改为span，您就有了2个段落。

我认为，您面临的问题是由于

div

元素的显示。将

div

元素替换为

span

元素。问题会解决的

我已经编辑了你的代码片段。在这里

。工具提示{
位置：相对位置；
显示：内联；
边框底部：1px点黑色；
}
.tooltip.tooltiptext{
可见性：隐藏；
宽度：500px；
背景色：黑色；
颜色：#fff；
文本对齐：居中；
边界半径：1px；
填充：1px0；
/*定位工具提示*/
位置：绝对位置；
z指数：1；
最高：100%；
左：50%；
左边距：-60px；
}
.tooltip:悬停.tooltiptext{
能见度：可见；
}
p、 例1{
左边距：200px；右边距：50px；
}

第1段测试这是一个工具提示工具提示显示此文本测试


第2段试验试验试验

改用

span

或将元素

内联

您的确切意思是什么？我需要在代码中更改什么？

div

不是

p

的有效子级。浏览器试图通过关闭

div

之前的

p

并在其之后打开一个新的

p

来修复此错误。改用跨距。

<p class="ex1" >
    PARAGRAPH-1 TEST
    <span class="tooltip">
        this is a tooltip
        <span class="tooltiptext">
            the tooltip shows this text
        </span>
    </span>
    TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST  
</p>