html - 与文本内联的按钮/链接？

Question

出于某种原因，我的标题按钮，它们只是：

<a href="#" class="button">Home</a>
<a href="#" class="button">Sign In</a>
<a href="#" class="button">Join!</a>

我希望它们与 h1 标签内联显示，尽管它们不是。html/css 在这里：http: //jsfiddle.net/XqsvP/

我不确定我需要使用什么 css inline 或什么。

score 1 · Accepted Answer

<div>默认情况下，元素是“块”级元素。这意味着它们总是在可以被认为是新行的前面，而不是与当前行“内联”。

在您链接到的 jsFiddle 上，尝试更改div.right为display:inline;or display:inline-block;（CSS 的第 25 行）。这将导致<div>与当前行“内联”显示。

我已经用你的小提琴来展示我建议的改变：http: //jsfiddle.net/CBEGS/1/

请注意，垂直边距可能需要一些调整，并且换行可能仍会强制按钮换行到下一行，但解决这些单独的问题是单独问题的主题:)

要div.right右对齐和h1.nobreak左对齐，您可能需要将宽度div.header_div设置为 100%，以便它与页面右侧对齐，而不是窄 div 的右侧。

此外，这些问题可能是相关的：

1 回答 1