Prevent line break between two elements in CSS

Question

For some basic layout work I'm doing, I'd like links that immediately follow a price to always be shown on the same line as the price. The price text is wrapped in a <span class="price"> tag while the link uses the buy-link class as in <a href="/buy" class="buy-link">Buy Now</a>.

I'm looking for CSS that will automatically prevent line breaking between the span and a tag but I'm either missing something or it can't be done. I can easily prevent line breaks within the two tags - but not between them.

I want to avoid wrapping both tags in a span with a white-space: nowrap manually and use pure CSS if possible.

Update: The HTML looks something like the following. It's not the real code but very similar.

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

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

If the link happens to be near the page edge - or block edge in a <div> or <table> browsers will wrap the Buy Now link to the next line. Separating the two elements.

Answer 1

As <span> element is meant for inline grouping by default, the price and link should be on same line.

I guess some CSS is over-riding it.

Answer 2

Can't you nest the anchor inside the span, like

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

then set the span to white-space: nowrap?

Answer 3

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