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是块级元素并以此形式呈现。 div也是块级元素。

因为你已经漂浮了它们，它们彼此相邻，直到容器水平充满。然后他们将换行到下一行。为防止包装，您可以使用溢出滚动，但ul不支持此属性。所以相反，你在包含div上使用溢出。

很难说出为什么你的旧版本没有用，而且你的新方法在没有示例代码的情况下也能正常工作。

Answer 2

通过在JQuery中执行此操作，您可以节省一些时间。看看这个article这应该有所帮助，并使它看起来好十倍。

Answer 3

或许，将<li>元素替换为<div>并删除<ul>

div#lasteventimg {
    overflow-x: scroll;
    overflow-y: hidden;
    width: 70%;
}
div#lasteventimg ul {
    list-style: none outside none;
    margin: auto;
}
div#lasteventimg div {
    display: table-cell;
}
div#lasteventimg img {
    /* remove the float:left from here */
}

我不明白我是如何在div中动态调整ul的

3 个答案: