0

我在将两个跨度对齐在一起时遇到问题。第二个跨度开始时略低于第一个跨度，这导致跨度未对齐。

本质上，我试图将 .cbtnSymbol 和 .cbtnLabel 对齐在一起，以便它们从相同的高度开始。

这是一个测试用例：http: //jsfiddle.net/DwGEa/

4

5 回答 5

1

尝试float-s span- http://jsfiddle.net/DwGEa/4/

于 2012-06-04T14:14:06.350 回答
0

添加 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/

于 2012-06-04T14:17:16.707 回答
0

给你：http: //jsfiddle.net/DwGEa/19/

只需添加line-height: 30px; vertical-align:middle;到.cbtnLabel

于 2012-06-04T14:21:01.820 回答
0

将最后四个 CSS 属性另外添加到您的标签标签 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;
}​
于 2012-06-04T14:58:05.303 回答
0

我不确定您对此有何感受，但看起来您已经将 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/

于 2012-06-04T17:57:03.803 回答