Question

我在将两个跨距对齐时遇到问题。第二个跨度开始略低于第一个跨度导致跨距错位。

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

Answer 1

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

Answer 2

添加行高和垂直对齐似乎有所帮助，但我不能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 3

在这里：http://jsfiddle.net/DwGEa/19/

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

即可

Answer 4

将最后四个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;
}

Answer 5

我不确定你对此会有什么看法，但看起来你已经将你的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。（例如：你不再需要显示：inline-block）

DEMO http://jsfiddle.net/DwGEa/37/

如何将两个跨距对齐？

5 个答案: