如何解决我不明白如何在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 */
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。