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

问题描述

|| 我正在使用php使用li元素动态填充div。我在使可滚动区域仅限于内容方面遇到麻烦。我以前在ul中使用多余的空间，现在还是，但是当我将css中的高度设置为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;
}

    

解决方法

        您的div＃lasteventimg的height属性拼写错误。 ul是块级元素，因此呈示。 div也是块级元素。 因为您已经漂浮了li's，所以它们会彼此相邻放置，直到容器水平装满为止。然后，它们将换行到下一行。为了防止换行，可以使用溢出滚动，但是ul不支持此属性。因此，您改为在包含div的位置使用溢出。 很难说出为什么没有示例代码您的旧方法不起作用，而您的新方法却有效。     ,        您可以通过在JQuery中执行此操作来节省时间。看一下这篇文章，应该会有所帮助，并使它看起来好10倍。     ,        也许，将

<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 */
}