Предотвращение разрыва строки между двумя элементами в CSS

Для какой-то основной работы с макетами, которую я делаю, мне нужны ссылки, которые сразу же следуют цене, которая всегда будет отображаться в той же строке, что и цена. Текст цены обернут тегом <span class="price">, в то время как ссылка использует класс buy-link, как в <a href="/buy" class="buy-link">Buy Now</a>.

Я ищу CSS, который автоматически предотвратит разрыв строки между тегами span и a, но я либо что-то пропущу, либо это невозможно. Я могу легко предотвратить разрывы строк в двух тегах, но не между ними.

Я хочу, чтобы избежать обертывания обоих тегов в 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> будет привязана ссылка Buy Now к следующей строке. Разделение двух элементов.

Ответы

Ответ 1

Вы не можете вставить якорь внутри пролета, например

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

затем установите диапазон в белое пространство: nowrap?

Ответ 2

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

Ответ 3

Решение с использованием метода css white-space: nowrap

<style>
   div{width:10px;white-space:nowrap;}
  .price{ font-weight: bold; }
  .buy-link{ color: green; }
</style>
<div>
  <span class="price">$50</span>
  <a href="/buy" class="buy-link">Buy Now</a>
</div>​

Решение с использованием метода HTML (в случае, если вы не в состоянии использовать white-space: nowrap;)

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

    <span class="price">$50</span>&nbsp;<a href="/buy" class="buy-link">Buy&nbsp;Now</a>
<!--Just removing the breaking whitespace between "Buy" and "Now"-->

* Просто удалил разрыв между "Buy" и "Now" и вставил nbsp (неразрывное пространство), чтобы break/wrap не возникал *

Посмотрите эту скрипту с эффектом обертывания: http://jsfiddle.net/8SP2C/2/

Посмотрите эту скрипту css white-space:nowarp: http://jsfiddle.net/8SP2C/1/

Смотрите эту скрипту с помощью метода html: http://jsfiddle.net/8SP2C/3/

Ответ 4

Я только что проверил это во всех пяти браузерах, и он отлично работает. Вам не нужен родительский класс. Чтобы сделать что-то смелое, не создавая разрыв строки, просто выполните следующее:

Сначала поместите это в головную часть вашего html:

<style type="text/css">
.makeBold /* to only be used with SPAN: (i.e.) <span class="makeBold"></span>  */
{
   font-weight:bold;
   width:122px;    /* This should be the width length of the thing you are bolding */
   white-space:nowrap; 
}
</style>

Позже в теле вашего HTML вы должны просто использовать span.

<span class="makeBold">BOLD THIS TEXT</span>

Вы можете использовать span внутри Div и оставаться совместимым с HTML5.

Enjoy

Ответ 5

Поскольку элемент <span> предназначен для встроенной группировки по умолчанию, цена и ссылка должны быть в одной строке.

Я думаю, что какой-то CSS перегружает его.