折叠到其子级高度的CSS水平条(获取不必要的垂直空间)

Question

我想要一个水平的条形布局，将崩溃到它的孩子的高度。

下面的例子几乎让我明白了，除非我将孩子的直线高度设置为>= 1.4em，否则我会在顶部得到一个不想要的垂直空间。

为什么包含的条子不完全塌陷？

​

​

请参阅http://jsfiddle.net/ymnmT/

HTML:

<div class="hbar hbar1">
    <a>Some button</a><span>Some text</span>
</div>

<div class="hbar hbar2">
    <a>Some button</a><span>Some text</span>
</div>

CSS:

/*== layout ==*/

.hbar > * {
    display:inline-block;
    vertical-align: middle;
}

.hbar1 > * {
    line-height:1em;
}
.hbar2 > * {
    line-height:2em;
}

/*== styles ==*/

.hbar {background:#DDD;margin:10px;}
a {background-color:#FFF;}
span {background:red;}

(请注意-寻找使用内联块的解决方案)

Answer 1

如果您将line-height of .hbar设置为小于您的子元素的line-height，那么就应该可以做到这一点。问题是div有一个比子元素更大的默认行高。

Answer 2

这是因为您正在为div的子程序设置显示为内联块，并为他们设置线高。它正按照你说的去做。你想做什么？