如何将多个链接放在同一行？ (HTML5)答案

【问题标题】：How do I put multiple links on the same line? (HTML5)如何将多个链接放在同一行？ (HTML5)
【发布时间】：2013-11-23 22:30:10
【问题描述】：

我正在尝试将多个链接放在同一行，这样我就可以拥有一整条链接，我已经尝试过：

<a href="website_homepage.htm"><h2 style="font-family:tempus sans itc;">Home</h2></a> <a     href="website_hills.htm"><h2 style="font-family:tempus sans itc;">Hills Pupil Tailored Website</h2></a>

但是当我测试它是否有效时，这两个链接在不同的行上，有谁知道我怎样才能让它们在同一行上？

【问题讨论】：

h2 { display: inline }
无效； h2 是块元素，而 a 是内联元素...
@TiesonT.，不，the a element has a transparent content model, which allows it to contain flow content
@zzzzBov 4.01 规范说它是内联的：w3.org/TR/html401/struct/links.html#h-12.2，尽管 HTML5 规范与您的 WHATWG 链接一致：dev.w3.org/html5/markup/a.html#a - 所以我想这取决于文档类型。
@TiesonT.，你应该注意到这篇文章被标记为html5

标签： html hyperlink

【解决方案1】：

只需添加：

h2{
    display: inline;
}

到你的CSS，问题就解决了。

【讨论】：

【解决方案2】：

这是因为h2 display 属性是block。

尝试：

h2 {
    display: inline-block;
}

或

h2 {
    display: inline;
}

在文件的开头（用<style> 标签括起来）或在样式表文件中。

参见典型的默认显示属性here

【讨论】：

如果这回答了您最初的问题，请将其标记为“已接受的答案”

【解决方案3】：

或者将“h2”替换为“span”，链接将位于同一行。

或者你可以说：

<h2 style="font-family:tempus sans itc;"><a href="website_homepage.htm">Home</a> <a href="website_hills.htm">Hills Pupil Tailored Website</a></h2>

将所有链接放在一个 h2 标记中，而不是为每个链接使用一个。

【讨论】：