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

为您的链接显示“内嵌块”，它们将显示在彼此旁边。然后，您可以添加一些填充或边距以给它们一些空间。

使用li标签并给它们显示：内联块样式，可以获得相同的结果。

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

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>

如何使用HTML将超链接排列在一起

2 个答案: