防止CSS中两个元素之间的换行符

Question

对于我正在做的一些基本布局工作,我想要立即跟随价格的链接始终显示在与价格相同的行上.价格文本包含在<span class="price">标签中,而链接使用buy-link类,如下所示<a href="/buy" class="buy-link">Buy Now</a>.

我正在寻找可以自动防止span和a标签之间断线的CSS,但我要么缺少某些东西,要么就是无法完成.我可以轻松地防止两个标签内的换行- 但不能防止它们之间的换行.

我想避免使用手动将两个标签包装span在一起white-space: nowrap并尽可能使用纯CSS.

更新: HTML类似于以下内容.这不是真正的代码,而是非常相似.

<style>
    .price{ font-weight: bold; }
    .buy-link{ color: green; }
</style>

<span class="price">$50</span> <a href="/buy" class="buy-link">Buy Now</a>

如果链接恰好位于页面边缘附近 - 或者在一个<div>或多个<table>浏览器中的块边缘将"立即购买"链接包装到下一行.分开这两个要素.

Answer 1

你不能把锚嵌在跨度内,比如

<span class="price"><a href="/buy" class="buy-link">Buy Now</a>&nbsp;Only $19.95!</span>

然后将跨度设置为空白:nowrap？

Answer 2

<span class="price">$50</span>&nbsp;<a href="/buy" class="buy-link">Buy Now</a>

Answer 3

由于<span>元素默认用于内联分组，因此价格和链接应位于同一行。

我猜想有些 CSS 会覆盖它。