新版本的内联显示不工作-我的只是不一致

Question

我知道有关 display:inline 不工作的问题已因不同情况被多次询问，但我找不到我的问题。它有效但无效，即使在同一段落中也是如此。我使用的是工具提示，它在台式机和移动设备上运行良好。这是页面：https://coachcaudlecares.org/llltest.html 这是 css:

.tooltip {
  position: relative;
  display:inline;
  color: red;
  
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #999999;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1000;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

这是 html 中的示例段落：

<p>During Jim&apos;s <div class="tooltip">toddler<span class="tooltiptext">Toddler Jim with mother, Ethyl Green Caudle, circa 1934<br/><img src=/images/toddlerjimandmom.jpg width="134"></span></div> years, his parents divorced. His mother, who had been adopted by Grady &quot;Grandpa Russell&quot; Sr., owner of the local <div class="tooltip">Russell Transfer Company<span class="tooltiptext">Russell Transfer vehicle<br><img src=/images/russelltransfer.png width="266"></span></div>, and Ida Jane House Russel, became a single mom during one of the most-difficult times in our country&apos;s history, the Great Depression.

我看不出使一个显示内联而另一个不显示的代码有任何区别。我错过了什么？感谢您的任何建议！

Answer 1

您不能将 <div> 个元素放在 <p> 个元素中——这是无效的 HTML。 <p> 个元素只能包含 phrasing content, but <div> elements are flow content.

浏览器在遇到无效HTML时，往往会做出意想不到的事情。在这种情况下，许多浏览器会在遇到开始 <div> 标记时关闭所有打开的段落元素。

如果您需要使用不具有语义意义的元素将文本换行到段落中，则应改用 <span> 元素。它是相当于 <div> 元素的措辞内容。

<!-- this is invalid -->
<p>Lorem ipsum <div class="tooltip">dolor</div></p>

<!-- use spans instead -->
<p>Lorem ipsum <span class="tooltip">dolor</span></p>

新版本的内联显示不工作-我的只是不一致

New version of display inline not working-mine is just not consistent

html

css

tooltip