CSS水平条折叠到其子项的高度（获取不需要的垂直空间）

Question

我想要一个水平条布局，它会折叠到它的孩子的高度。

以下示例几乎让我在那里，除非我在顶部获得不需要的垂直空间，除非我专门将子行高设置为＆gt; = 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的{​​{1}}设置为小于您应该执行操作的子元素的.hbar。问题是div的默认行高大于子元素的行高。

Answer 2

这是因为您正在为div的子项设置显示内联块并为它们设置行高。它正在做你正在告诉它的事情。你想要完成什么？