如何使用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>

- DrSkittles

Answer 1

将您的链接设置为"display: 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>

- consuela

---

现在，我该如何在它们之间添加一些空格？ - DrSkittles

@DrSkittles，我刚刚更新了我的答案，并在第一个链接中添加了正确的边距。我还向您展示了如何使用li标签实现相同的结果。 - consuela

Answer 2

根据 this baller 资源，<span> 标签用于在文档中分组内联元素：http://www.w3schools.com/tags/tag_span.asp。

<span>
<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>
</span>

- Goodword