<分区>
<分区>
我在段落中组合工具提示标签和段落边距设置时遇到问题。
这是我目前得到的:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 500px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 1px;
padding: 1px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
p.ex1 {
margin-left: 200px; margin-right: 50px;
}
<body style="text-align:center;">
<font face="Arial" size="4">
<p class="ex1">
PARAGRAPH-1 TEST <div class="tooltip">this is a tooltip<span class="tooltiptext"> the tooltip shows this text</span></div> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
<p class="ex1">
PARAGRAPH-2 TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
</font>
</body>
它显示 3 个段落,就像新段落从工具提示开始一样。
我该怎么做才能将其显示为两个段落?
最佳答案
我认为,您面临的问题是由于 div
元素的显示引起的。将 div
元素替换为 span
元素。问题就会迎刃而解!
我已经编辑了您的代码片段。在这里,
.tooltip {
position: relative;
display: inline;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 500px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 1px;
padding: 1px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
p.ex1 {
margin-left: 200px; margin-right: 50px;
}
<body style="text-align:center;">
<font face="Arial" size="4">
<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>
<p class="ex1">
PARAGRAPH-2 TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
</font>
</body>
关于html - 如何在段落中组合工具提示标签和段落边距标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55340561/