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

Question

我正试图制作一个相当复杂的图像和信息网格(几乎像Pinterest).具体来说,我试图在一个接一个的内插位置<ul>s.我有它的工作,但一个方面是导致问题,所以我试图问这个小块,以避免整个问题的复杂性.

为了水平对齐图像及其信息,我们使用内嵌<li>s其他内联块级元素.除了<li>s几乎没有高度之外,大部分都能正常工作.

这里的HTML和CSS 在JSFiddle中如果你想要除了下面的内容之外还要搞乱它:

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 ...
}

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