html - 2 つのスパンを一緒に揃える方法は?

Question

2 つのスパンを揃えるのに問題があります。2 番目のスパンは最初のスパンよりわずかに低い位置から始まり、スパンの位置合わせがずれています。

基本的に、.cbtnSymbol と .cbtnLabel を揃えて、同じ高さから開始するようにしています。

ここにテストケースがあります: http://jsfiddle.net/DwGEa/

Answer 1

-sを試してくださいfloat- http://jsfiddle.net/DwGEa/4/span

Answer 2

どうぞ： http： //jsfiddle.net/DwGEa/19/

に追加line-height: 30px; vertical-align:middle;するだけ.cbtnLabel

Answer 3

これについてどのように感じるかはわかりませんが、すでに div をテーブルとして設定しているようです。では、次のようなことを試してみてはどうでしょうか。

<table class="cmenu">
    <tr class="cbtn add">
        <td class="cbtnSymbol">+</td>
        <td class="cbtnLabel">Add</td>
    </tr>
    <tr class="cbtn add">
        <td class="cbtnSymbol">-</td>
        <td class="cbtnLabel">Delete</td>
    </tr>        
</table>

こうすることで、簡単にするために一部の CSS を取り除くことができます。(例: display:inline-block はもう必要ありません)

デモ http://jsfiddle.net/DwGEa/37/

Answer 4

line-height と vertical-align を追加すると役立つようですが、最終結果がどうなるかは 100% わかりません。

<div class="cmenu">
        <div class="cbtn add"><span class="cbtnSymbol">+</span><span class="cbtnLabel" style="line-height: 20px; vertical-align: top;">Add</span></div>
        <div class="cbtn add"><span class="cbtnSymbol">-</span><span class="cbtnLabel" style="line-height: 20px; vertical-align: top;">Delete</span></div>
</div>

変更された jsFiddle は次のとおりです: http://jsfiddle.net/DwGEa/11/

Answer 5

最後の 4 つの CSS プロパティを label タグの CSS に追加します

.cbtnLabel {
     padding: 0 0 0 10px;
     font-size: 8px;
     height: 30px;
     display: inline-block;
     display: -moz-inline-stack;
     vertical-align:top;
     zoom: 1;
     *display: inline;
}​