4

我正在尝试制作一个相当复杂的图像和信息网格（几乎像 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 定位。

谢谢。

4

2 回答 2

6

内联元素没有设置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>使用 using解决inline-block了这个问题，但你说这不是你的选择。为什么不？另一种解决方案是使那些 li 的块元素，并使它们向左浮动。如果您遇到内容重叠的问题，请在整个 ul 上使用溢出属性，以确保 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 ...
}

这是否可以解决您的难题？

于 2012-07-10T21:38:39.573 回答
3

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

'height' 属性不适用。内容区域的高度应该基于字体，但是这个规范没有具体说明如何。例如，UA 可以使用 em-box 或字体的最大升序和降序。（后者将确保部分高于或低于 em-box 的字形仍在内容区域内，但会导致不同字体的不同大小的框；前者将确保作者可以控制相对于“行高”的背景样式，但会导致字形在其内容区域之外绘制。）

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

该部分继续说：

内联非替换框的垂直内边距、边框和边距从内容区域的顶部和底部开始，与 'line-height' 无关。但在计算行框高度时只使用“行高”。 [我的重点]

当您将较大的 inline-block 元素放在 inline 元素中时，行框的高度会增加以包含 inline-block 元素，但根据上面的文本，这不会增加包含 inline 元素的高度。

于 2012-07-10T23:28:19.510 回答