html - 如何使用 HTML 使超链接彼此相邻排列

Question

所以，当我默认创建超链接时，它会开始一个新行。我试过 li 标签，我也试过 div 标签。这是我的代码

<a href="index.html" style="text-decoration : none; color : #00FFFF;"><h1>Home</h1></a>
<a href="staff.html" style="text-decoration : none; color : #00FFFF;"><h1>Staff</h1></a>

Answer 1

给你的链接显示“inline-block”，它们会并排出现。然后，您可以添加一些填充或边距以给它们一些空间。

您可以通过使用 li 标签并为它们提供 display:inline-block 样式来获得相同的结果。

<ul>
    <li style="display:inline-block;">
        <a href="index.html" style="text-decoration:none; color:#00FFFF;"><h1>Home</h1></a>
    </li>
    <li style="display:inline-block;">
        <a href="staff.html" style="text-decoration:none; color:#00FFFF;"><h1>Staff</h1></a>
    </li>
</ul>

顺便说一句，您不应在同一页面中使用两个或多个“h1”标题，并且应避免使用内联样式。将它们保存在外部 CSS 文件中。

这是使用 display:inline-block 样式并带有一些间距的原始代码:

<a href="index.html" style="display:inline-block; text-decoration:none; color:#00FFFF; margin-right:20px;"><h1>Home</h1></a>
<a href="staff.html" style="display:inline-block; text-decoration:none; color:#00FFFF;"><h1>Staff</h1></a>