css - 我不明白如何在 div 中动态调整 ul 的大小

Question

我正在使用 php 动态地用 li 元素填充一个 div。我无法将可滚动区域限制为内容。我以前在我的 ul 中使用了大量的额外空间，现在仍然是，但是当我将 css 中的 height 设置为 70% 时，它工作得很好。

这是因为 ul 传统上是垂直的，而我强制它水平吗？

这是工作站点的链接 http://www.evan-livingston.com/test/gallery.php

我的CSS:

div#lasteventimg {
    width: 100%;
    heigth: 200px;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;
}

div#lasteventimg ul {
    list-style: none;
    height: 70%;
    width: 8000px;      
    margin: auto;
}

div#lasteventimg ul li {
    float:left;    
    display: inline-block;  
}

div#lasteventimg img {
    width: 200x;
    float: left;
}

Answer 1

您的 div#lasteventimg 的高度属性拼写错误。

ul 是一个 block 级元素并按原样呈现。 div 也是 block 级元素。

因为你已经 float 了 li，所以它们并排坐着，直到容器水平地装满。然后他们将换行到下一行。为防止换行，您可以使用溢出滚动，但 ul 不支持此属性。因此，您改为在包含的 div 上使用溢出。

如果没有示例代码，很难说出为什么旧方法行不通而新方法行得通。