nowraps間の折り返し

Question

私はインラインで表示されるべきリンクのリストを持っています。 リンクの途中でテキストが折り返されないようにすることです。ラップする必要がある場合は、との間にリンクする必要があります。

したがって、私はwhite-space:nowrap;プロパティを自分のリンクに追加しました。しかし結果のリンクリスト決しては私のdiv箱から包み込みます。

どのようにしてリンク間を折り返すように私のリストを得ることができますか？ありがとうございました！

<div class="box"> 
<p> 
<a href="mylink1" class="mytag">Hello there</a> 
<a href="mylink2" class="mytag">Hello you</a> 
<a href="mylink3" class="mytag">Hello people</a> 
<a href="mylink4" class="mytag">Hello world</a> 
</p> 
</div> 

関連するCSSだけである：

.mytag,.mytag:link,.mytag:visited{ 
    background-color:#FFF5CA; 
    border:1px solid #FFE5B5; 
    color:#222; 
    padding:2px 5px; 
    margin-right:5px; 
    white-space:nowrap; 
} 
.mytag:hover{ 
    background-color:#FFE5B5; 
} 

Answer 1

を、white-space:nowrap;それが想定していることを正確に実行しており、要素を複数の行に分割していません。

あなたが実際に探しているのは、リンクを次の行に折り返さずに、1行に表示することです。したがって、displayプロパティをinline-blockとして使用してください。

.mytag,.mytag:link,.mytag:visited{ 
    background-color:#FFF5CA; 
    border:1px solid #FFE5B5; 
    color:#222; 
    padding:2px 5px; 
    margin-right:5px; 
    display: inline-block; 
} 

Answer 2

神秘的なものがここにありません - あなたのコンテナが特定widhth持っている場合、彼らは自動的にリンク間ラップする必要があります。基本的http://jsfiddle.net/RZfd2/