html - 为什么内联元素不从其子元素继承高度？

Question

我正在尝试制作一个相当复杂的图像和信息网格(几乎像 Pinterest)。具体来说，我正在尝试内联定位一组 <ul>s一个接一个。我让它工作，但有一个方面导致了问题，所以我试图询问这个小部分以避免整个问题的复杂化。

为了水平对齐图像及其信息，我们使用内联 <li>s与它们内部的其他内联 block 级元素。大多数情况下一切正常，除了 <li>s几乎没有高度。

HTML 和 CSS 是 in JSFiddle here如果除了以下之外你还想弄乱它:

HTML:

<div>
<ul class="Container">
    <li>
        <span class="Item">
            <a href="#"><img src="http://jsfiddle.net/img/logo.png"/></a>
            <span class="Info">
                <a href="#">Title One</a>
                <span class="Details">One Point One</span>
            </span>
        </span>
    </li>
    <li>
        <span class="Item">
            <a href="#"><img src="http://jsfiddle.net/img/logo.png"/></a>
            <span class="Info">
                <a href="#">Title Two</a>
                <span class="Details">Two Point One</span>
            </span>
        </span>
    </li>
</ul>

CSS:

.Container {
    list-style-type:none;
}
.Container li {
    background-color:grey;
    display:inline;
    text-align:center;
}
.Container li .Item {
    border:solid 2px #ccc;
    display:inline-block;
    min-height:50px;
    vertical-align:top;
    width:170px;
}
.Container li .Item .Info {
    display:inline-block;
}
.Container li .Item .Info a {
    display:inline-block;
    width:160px;
}

如果您查看 jsfiddle 链接中的结果，您可以看到灰色背景仅包含整个 <li> 的一小部分。 .我知道改变 <li>至 display:inline-block解决了这个问题，但由于其他原因这是不可行的。

所以首先，我只是想看看是否有人理解为什么内联 <li>元素没有任何高度。我在规范中找不到任何解释这一点的内容。我知道我不能向内联元素添加高度，但任何关于为什么会发生这种情况的解释都可能使我能够修复会很好。

其次，如果您使用 IE 的开发人员模式检查元素，您会发现虽然背景颜色位于正确的位置，但 <li>'s 的实际位置根据悬停在元素上，边界框位于容器的底部。如果它在每个浏览器中都位于顶部，我可以处理这个问题，但它显然有所不同。

注意:在这种情况下，我不太关心旧版浏览器，但我不使用 HTML5 或 JavaScript 定位。

谢谢。

Answer 1

内联元素没有设置 height 的选项.行内元素是在一行上的元素，因此继承行的高度。 block 元素是占据整个宽度的元素，可以指定宽度、高度和其他使它们更容易设置样式的元素。

有关规范中的详细说明，请参阅: http://www.w3.org/TR/CSS2/visuren.html#inline-formatting

inline-block使元素显示为内联，但您可以分配 height和 width到它，它将随着其中的内容扩展。我没有使用 inline-block很多时候是因为它在 IE 中的错误行为，但那些日子现在已经结束了: http://www.quirksmode.org/css/display.html

制作<li>使用 inline-block解决了这个问题，但你说这不是你的选择。为什么不？另一种解决方案是使那些 li 的 block 元素，并使它们向左浮动。如果您遇到重叠内容的问题，请在整个 ul 上使用 overflow 属性以确保 ul 下推其他内容。

ul.Container {
  list-style-type: none;
  overflow: hidden; /* so height expands with the floated content */
}

ul.Container li {
  display: block;
  float: left;
  ... more styling ...
}

这能解决您的难题吗？