Html 为什么不是'；从子元素继承高度的内联元素？

我正在尝试制作一个相当复杂的图像和信息网格（几乎像Pinterest）。具体地说，我正在尝试将一组

s

直接内联定位到另一组。我有它的工作，但一个方面是造成问题，所以我试图问这个小部分，以避免整个问题的复杂性

为了水平对齐图像及其信息，我们使用内联

s

和其中的其他内联块级元素。除了

s

几乎没有高度外，大多数情况下一切正常

HTML和CSS是除以下内容外，如果您想处理它：

HTML:

如果您查看JSFIDLE链接中的结果，您可以看到灰色背景仅包含整个

的一小部分。我知道将

更改为

显示：内联块

可以解决此问题，但由于其他原因，这是不可行的

首先，我只是想看看是否有人理解为什么内联

元素没有任何高度。我在说明书中找不到任何解释这一点的东西。我知道我不能给内联元素添加高度，但是任何关于为什么会发生这种情况的解释都可以帮助我解决这个问题

其次，如果您使用IE的开发者模式检查元素，您将看到，尽管背景颜色位于正确的位置，但根据悬停在元素上的情况，

的

边界框的实际位置位于容器底部。我可以处理这个问题，如果它是在每个浏览器的顶部，但它显然是不同的

注意：在这种情况下，我并不真正关心较旧的浏览器，但我不使用HTML5或JavaScript定位

---

谢谢。

内联元素没有设置

高度的选项。内联元素是在一行上的元素，因此继承行的高度。块元素是占据全宽度的元素，可以指定宽度、高度和其他使其更易于设置样式的内容

有关规范中的详细说明，请参见：

内联块
使元素显示为内联，但您可以将
高度
和
宽度
指定给它，它将随着其中的内容展开。我没有经常使用
内联块
，因为它在IE中的错误行为，但那些日子显然已经过去了：

使用
内联块制作
可以解决这个问题，但您说这不是您的选项。为什么不呢？另一个解决方案是使这些李的块元素，并使它们浮动到左侧。如果您有重叠内容的问题，请在整个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 ...
}

这能解决您的难题吗？
CSS 2.1规范的相关部分是。它说：

“高度”属性不适用。内容区域的高度
应基于字体，但本规范未指定
怎样。UA可以，例如，使用em盒或最大上升器和
字体的下降部分。（后者将确保带有零件的图示符
em框上方或下方仍在内容区域内，但
导致不同字体的大小不同的框；前者会
确保作者可以控制背景样式相对于
“线条高度”，但会导致在其内容之外绘制轮廓
面积。）

元素的样式是内联的，它的内容是一个不能跨行的内联块对象，因此
的内容区域只有一行高。因此，
的内容区域的高度为1 x f（字体高度）。有关字体高度增加使灰色区域变大的演示，请参见

该节接着说：

内联未替换框的垂直填充、边框和边距
从内容区域的顶部和底部开始，与此无关
使用“线条高度”。但仅在以下情况下使用“线高度”
计算线框的高度。
[我的重点]

当您在内联元素中放置较大的内联块元素时，线框的高度会增加以包含内联块元素，但如上所述，这不会增加包含内联元素的高度。
我认为浮动与我的谜题中的
内联块
有相同的问题。它源于嵌套列表的更大层次结构中的一个问题，如果我不能解决这个问题，它可能应该有自己的问题。简而言之，假设我有一个
，它的
元素多于分配的宽度，通过使用
内联
，
将包裹。使用
内联块
或
块
/float可防止
元素被包装。使用
溢出：隐藏可以让
ul
包装浮动的
li
项。但那没用？不幸的是，没有。重叠并不是真正的问题，它使
li
项向下流入下一行。正如@Alohci所指出的，
block
和
inline block
不能像
inline
那样跨越多行。谢谢你的建议。我觉得
溢出：隐藏的
技巧稍后会派上用场。这很好地解释了为什么内联
的高度很小。谢谢我把这个标记为答案，因为它解释了我的问题，尽管它不能解决我更大的问题。你知道为什么内联的
会出现在IE中其子代所占空间的底部吗？
.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;
}

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

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