Question

我有以下html：

＆＃13;

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div>
  <!-- ... -->
</div>
<header>
  <!-- header stuff -->
</header>
<main>
  <!-- main stuff -->
</main>
<footer>
  <img src="http://via.placeholder.com/380x50?text=subheading" class="footer">
  <nav class="footercontent"><a href="/index.html" target="_top" style="padding-right:4px">Start</a><a href="/reports" target="_top" style="padding-right:4px">Reports</a><a href="/preferences.go" target="_top" style="padding-right:4px">Preferences</a><a href="/about.go" target="_top"
      style="padding-right:4px">About</a><a href="/license.go" target="_top" style="padding-right:4px">License</a><a href="/admin.go" target="_top" style="padding-right:4px">Admin</a><a href="/help/help.html" target="_top" style="padding-right:4px">Help</a>    <a href="/help.pdf" target="_top" style="padding-right:4px">Pdf</a></nav>
</footer>

＆＃13;

当我在非常小的屏幕（移动设备或调整浏览器大小）上查看时，链接不会被包装。相反，我得到一个滚动条。

当我在每个链接标记之间手动添加空格时 - ＆gt; </a><a变为</a> <a，然后包装就像魅力一样。

我正在寻找一个css解决方案，因为我无法真正修改html，因为它是由第三方库生成的。

Answer 1

<a>标记是每个默认的内联元素。如果内联元素没有分隔元素（例如空格或类似元素），则浏览器不知道在哪里破坏它们。

只需为您的链接元素设置display: inline-block;即可。这样，浏览器将它们视为内联元素，但会像块元素一样将它们分开：

a {
  display: inline-block;
}

<footer>
  <img src="http://via.placeholder.com/380x50?text=subheading" class="footer">
  <nav class="footercontent"><a href="/index.html" target="_top" style="padding-right:4px">Start</a><a href="/reports" target="_top" style="padding-right:4px">Reports</a><a href="/preferences.go" target="_top" style="padding-right:4px">Preferences</a><a href="/about.go" target="_top"
      style="padding-right:4px">About</a><a href="/license.go" target="_top" style="padding-right:4px">License</a><a href="/admin.go" target="_top" style="padding-right:4px">Admin</a><a href="http://www.jthink.net/songkong/help/help.html" target="_top"
      style="padding-right:4px">Help</a> <a href="http://www.jthink.net/songkong/help.pdf" target="_top" style="padding-right:4px">Pdf</a></nav>
</footer>

如何修复小屏幕链接标签的包装

1 个答案: