web-dev-qa-db-ja.com

CSSの2つの要素間の改行を防ぐ

私が行っているいくつかの基本的なレイアウト作業では、価格の直後に続くリンクを常に価格と同じ行に表示したいと思います。価格テキストは<span class="price">タグでラップされ、リンクは<a href="/buy" class="buy-link">Buy Now</a>のようにbuy-linkクラスを使用します。

spanタグとaタグの間の改行を自動的に防ぐCSSを探していますが、何かが足りないか、実行できません。改行を簡単に防ぐことができますwithin 2つのタグ-しかし、それらの間ではできません。

両方のタグを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>

リンクがたまたまページEdgeの近くにある場合、または<div>または<table>ブラウザでEdgeをブロックすると、[今すぐ購入]リンクが次の行に折り返されます。 2つの要素を分離します。

csswhitespace
17
Paul Alexander

スパンの中にアンカーを入れ子にすることはできません

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

次に、スパンを空白に設定します：nowrap？

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

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メソッドを使用した解決策（空白を使用する気がない場合：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"-->

*「購入」と「今」の間の改行スペースを削除し、改行/折り返しが発生しないようにnbsp（非改行スペース）を挿入しました*

ラッピング効果のあるこのフィドルを参照してください： http://jsfiddle.net/8SP2C/2/

Css white-space:nowrapでこのフィドルを参照してください： http://jsfiddle.net/8SP2C/1/

Htmlメソッドでこのフィドルを参照してください： http://jsfiddle.net/8SP2C/3/

1
Robin Rizvi

5つのブラウザすべてでこれをテストしたところ、正常に動作します。親クラスは必要ありません。改行を作成せずに何かを太字にするには、次のようにします。

まず、これを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>

Div内でspanを使用して、HTML5に準拠したままにすることができます。

楽しい

1
Donald

なので <span>要素は、デフォルトでinlineグループ化を目的としており、価格とリンクは同じ行にある必要があります。

一部のCSSがそれを上書きしていると思います。

0
N 1.1