0

所以我有一些看起来像这样的 HTML/CSS：http: //jsfiddle.net/nw2Ym/1/

CSS：

.heading {
    font-size: 24px;
}

.badge {
    font-size: 10px;
    padding: 3px 10px;
    background: gray;
    color: #fff;
    vertical-align: baseline;
    margin-bottom: 3px;
    display: inline-block;

}

HTML：

<div>
    <span class="heading">Testing Stuff</span>
    <span class="badge">OMG!</span>
</div>

Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text, Other Text,

我想要的是将徽章的底部与其旁边的文本底部对齐。相反，文本的底部与徽章中文本的底部对齐会发生什么。

那时我想我会把徽章向上推，增加它的填充大小，所以我添加了一个边距。它最终不是将标签向上推，而是将其下的东西向下推。为什么会这样？另外，如何对齐徽章以使底部（填充后）与文本对齐？

4

1 回答 1

1

我想你正在寻找

vertical-align: text-bottom;

这是一个小提琴

于 2013-02-15T20:51:26.040 回答