私はパンくずメニューの次のマークアップを持っているインライン

Question

を表示：

<div> 
    <span class="start-here">You are here:<span> 
    <a href="/">example.com</a> 
    <span class="raquo"> › </span> 
    <a href="/news">News</a> 
    <span class="raquo"> › </span> 
    Title 
</div> 

は、すべての要素があるときに、絶対位置なしでそれらの›（.raquo）文字数ピクセルを移動するためのスマートな方法はありますインラインで表示されますか？私はこのキャラクターを他のキャラクターよりも小さくして、ラインの中央に（またはいくつかのピクセルダウン/アップで）表示させたい。

はIE6について

Answer 1

わからないが（私はそれがアップIE6のためにも働くとする必要がある）、あなたが望むものに近づける必要があり、以下のように思えます。

.raquo { 
    font-size: 10px; 
    vertical-align:middle; 
} 

だけ垂直整列はline-heightの真ん中に設定する必要があり、何が必要font-sizeを作ります。

Answer 2

私はこれを言うのは嫌ですが、tableを使用することができます。

<table> 
    <tr> 
    <td class="start-here">You are here:<td> 
    <td><a href="/">example.com</a></td> 
    <td class="raquo"> › </td> 
    <td><a href="/news">News</a></td> 
    <td class="raquo"> › </td> 
    <td>Title</td> 
    </tr> 
</table> 

Answer 3

あなたはCSSでvertical-align:top; font-size:x-small;を使用することができます。私はそれがすべてが垂直ラインの中央に配置されていることを確認するための唯一の信頼できる方法であることがわかってきました。しかし途中で完全に取得するのは難しい...

Answer 4

.raquo { 
    position:relative; 
    top:-2px; 
} 

これは、出力の一貫性のために最良の答えである私にとって最高の