我已经查看了https://stackoverflow.com/questions/5542428/why-on-earth-is-address-a-block-level-element,发现它对此事几乎没有什么洞察力。
一位客户给了我一段纯文本,我正在尝试针对用户体验和搜索引擎优化对其进行优化。这是文本中间的相关片段:
<p>[Several sentences]. Having trouble? Contact <address style="font-style:normal;display:inline">Jane Doe at <a href="mailto:jdoe@example.com">jdoe@example.com</a> or <a href="callto:5551234567">(555) 123-4567</a></address> between the hours of 9AM and 5PM. [Several sentences].</p>
然而,由于<address>
是块级元素,DOM 最终看起来像这样:
<p>[Several sentences]. Having trouble? Contact </p>
<address style="font-style:normal;display:inline">Jane Doe at <a href="mailto:jdoe@example.com">jdoe@example.com</a> or <a href="callto:5551234567">(555) 123-4567</a></address>
between the hours of 9AM and 5PM. [Several sentences].<p></p>
输出如下所示:
[几句话]。遇到麻烦?接触
Jane Doe 在 jdoe@example.com 或 (555) 123-4567在上午 9 点到下午 5 点之间。[几句话]。
显然,这破坏了用户体验,并且不是有效的 HTML。我的问题是仅块级背后的原因是什么<address>
,有什么办法可以让它内联显示?如您所见,CSSdisplay:inline
属性/值对这种情况没有任何帮助