ブートストラップアイコンをタグ内のテキストとともにインラインで表示する方法はありますか？

私は、テキストと矢印を示すブートストラップナビゲーションピルを持っています。残念なことに、テキストを長くすると、矢印がアンカーの境界に表示されます。 HTMLはこのように見えます。ブートストラップアイコンをタグ内のテキストとともにインラインで表示する方法はありますか？

 <a href="#"> 
      <span> Some longer sample text</span> 
      <i class="pull-right icon-chevron-right"></i> 
     </a>

は、どのように私は（テキスト/折り返す必要がありますすることができます）テキストのブロックとインラインで表示することができますか？

2012-12-19 kyrisu

をデモしてください：右完璧 - これは右の問題でしょうか？ – ShibinRagh

右端がうまく動きました。OK - アイコンの一部がタグの枠の外側に表示されました（しかし、タグの右側にあります）。 – kyrisu

あなたはこれが動作することができ、その後言ったように、あなたのテキストを折り返すことができれば...

<span><i class="pull-right icon-chevron-right"></i>Some longer sample text</span>

更新：

<span class="iwt"> 
<span>Some longer sample text</span> 
<i class="pull-right icon-chevron-right"></i> 
</span> 

.iwt{ 
display:block; 
}

2012-12-19 09:17:01

華麗です..ありがとう:) – kyrisu

あなたができるときに 'class =" iwt "'を使う理由'span'タグを' div'タグで置き換えますか？ –

css white-spaceを使用して：nowrap; 1行の問題でテキストを解決します。

.subject-pill > a { 
    border-style: solid; 
    border-width: 1px; 
    white-space:nowrap; 
} 
.subject-pill{ 
    width: 218px; 
}

2012-12-19 09:11:44

申し訳ありません - 私はおそらく明確ではなかった（英語は母国語ではありません）。テキストは正常です（1行にする必要はありません）。テキストブロックの右側にアイコンが必要です（テキストがラップされているかどうかは関係ありません）。 – kyrisu

またはこれを追加してみてください。。小文字の丸薬{ width：218px; } またはディスプレイを削除：インラインブロック。 bootstrap.min.cssのクラス[class * = "icon-"]クラス –

使用してくださいこの構造

<a href="#"> 
     <i class="pull-right icon-chevron-right"></i> 
     <span> Some longer sample text</span> 

    </a>

フロートを働いていないhttp://jsfiddle.net/FNcGX/9/

2012-12-19 09:52:37 ShibinRagh

答えて