Question

我正在尝试制作一个相当复杂的图像和信息网格（几乎像Pinterest一样）。具体来说，我正在尝试将一组<ul>s一个接一个地内联到位。我有它的工作，但一个方面是导致问题，所以我试图询问这个小块，以避免整个问题的复杂性。

为了水平对齐图像及其信息，我们使用内联<li>s内部的其他内联块级元素。除了<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的选项。内联元素是一行上的元素，因此继承了行的高度。块元素是占据整个宽度的元素，可以分配宽度，高度和其他使其更容易样式的东西。

有关规格的详细说明，请参阅： 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的块元素，并使它们向左浮动。如果您遇到重叠内容的问题，请使用整个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 ...
}

这是解决你的难题的东西吗？

Answer 2

CSS 2.1规范的相关位是section 10.6.1 Inline, non-replaced elements的section 10.6 Calculating heights and margins。它说：

'height'属性不适用。内容区域的高度应该基于字体，但是这个规范没有指定怎么样。 UA可以例如使用em-box或最大上升器和字体的下降。（后者将确保带有部分的字形在em-box之上或之下仍然属于内容区域，但是导致不同字体的不同大小的盒子;前者会确保作者可以控制相对于的背景样式 'line-height'，但导致字形在其内容之外绘画面积。）

<li>元素采用内联样式，其内容是单个内联块对象，不能跨越行，因此<li>的内容区域只有一行高。因此<li>的内容区域的高度为1 x f（字体的高度）。有关字体高度增加使灰色区域变大的演示，请参阅http://jsfiddle.net/dh8nU/1/。

该部分继续说：

内联未更换框的垂直填充，边框和边距从内容区域的顶部和底部开始，无关使用'line-height'。但是，只有'线高'才被使用计算线框的高度。 [我的重点]

当您在内联元素中放置较大的内联块元素时，线框的高度会增加以包含内联块元素，但是根据上面的文本，这不会增加包含内联元素的高度。 / p>

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

2 个答案: