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

Question

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

下面的例子几乎让我到了那里，除了我在顶部得到一个不需要的垂直空间，除非我专门将孩子的 line-heights 设置为 >= 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-heightof设置.hbar为小于line-height子元素的 the ，则应该可以解决问题。问题是 div 的默认行高大于子元素的行高。

Answer 2

这是因为您将显示设置为 div 的子级的 inline-block 并为它们设置行高。它正在做你告诉它做的事情。你想达到什么目的？