怎么让div内的li不换行而直接隐藏

cloudgamer 2007-12-07 05:23:40
我在做一个图片展示的东西
一个div作容器通过scrollLeft左右滚动
已经用float:left;来水平排列
但里面的li(多个)总长度超过div长度就自动换到下一行
全部设了高度也是这样
现在只能是多放一个div设很大的长度来放li

请问怎么做才能做到想要的效果?

.picture_list{
margin-top:5px;
width:280px;
height:66px;
}

.picture_list_left{
height:66px;
width:16px;
float:left;
background:url(picture_list_left.gif) no-repeat right center;

cursor:pointer;
}


.picture_list_right{
height:66px;
width:16px;
float:left;
background:url(picture_list_right.gif) no-repeat left center;

cursor:pointer;
}

#PictureListShow{
height:50px;
width:248px;
float:left;
border-bottom:1px solid #C5C5C5;
border-top:1px solid #C5C5C5;
overflow:hidden;
padding-top:7px;
padding-bottom:7px;
}

.picture_list_mid {

}

.picture_list_mid li{
list-style:none;
float:left;
padding-left:5px;
padding-right:5px;
border-right:1px solid #C5C5C5;

height:50px;
width:50px;

display:inline;



}
.picture_list_mid li img{ width:50px; height:50px;}





<div class="picture_list">
<div class="picture_list_left" onclick="$('PictureListShow').scrollLeft += 60;"> </div>
<div id="PictureListShow">
<div class="picture_list_mid">
<ul>
<li> <a href="#"> <img src="1.gif"/> </a> </li>
<li> <a href="#"> <img src="b.gif"/> </a> </li>
<li> <a href="#"> <img src="1.gif"/> </a> </li>
<li> <a href="#"> <img src="1.gif"/> </a> </li>
<li> <a href="#"> <img src="1.gif"/> </a> </li>
<li> <a href="#"> <img src="b.gif"/> </a> </li>
</ul>
</div>
</div>
<div class="picture_list_right" onclick="$('PictureListShow').scrollLeft -= 60;"> </div>
</div>

...全文
760 点赞 收藏 2
写回复
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
cloudgamer 2007-12-07
能用!
谢谢
回复
yixianggao 2007-12-07
用expression动态算宽度吧,俺想来想去这招最简单!
L@_@K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="Gao YiXiang" />
<meta name="email" content="yixianggao@126.com" />
<meta name="keywords" content="javascript dhtml dom" />
<meta name="description" content="I love web development." />
<style type="text/css">
.picture_list{
margin-top:5px;
width:280px;
height:66px;
}

.picture_list_left{
height:66px;
width:16px;
float:left;
background:url(picture_list_left.gif) no-repeat right center;

cursor:pointer;
}


.picture_list_right{
height:66px;
width:16px;
float:left;
background:url(picture_list_right.gif) no-repeat left center;

cursor:pointer;
}

#PictureListShow{
height:50px;
width:248px;
float:left;
border-bottom:1px solid #C5C5C5;
border-top:1px solid #C5C5C5;
overflow:hidden;
padding-top:7px;
padding-bottom:7px;
}
ul
{
margin: 0;
}

#picture_list_mid {
width: expression(picture_list_mid.firstChild.childNodes.length*70);
}

#picture_list_mid li{
list-style:none;
float:left;
padding-left:5px;
padding-right:5px;
border-right:1px solid #C5C5C5;

height:50px;
width:50px;

display:inline;



}
#picture_list_mid li img{ width:50px; height:50px;}

</style>
<script type="text/javascript">
<!--
var $=document.getElementById;
//-->
</script>
</head>
<body>

<div class="picture_list">
<div class="picture_list_left" onclick="$('PictureListShow').scrollLeft += 60;"> </div>
<div id="PictureListShow">
<div id="picture_list_mid">
<ul>
<li> <a href="#"> <img alt="1.gif"/> </a> </li>
<li> <a href="#"> <img alt="2.gif"/> </a> </li>
<li> <a href="#"> <img alt="3.gif"/> </a> </li>
<li> <a href="#"> <img alt="4.gif"/> </a> </li>
<li> <a href="#"> <img alt="5.gif"/> </a> </li>
<li> <a href="#"> <img alt="6.gif"/> </a> </li>
<li> <a href="#"> <img alt="7.gif"/> </a> </li>
<li> <a href="#"> <img alt="8.gif"/> </a> </li>
<li> <a href="#"> <img alt="9.gif"/> </a> </li>
<li> <a href="#"> <img alt="10.gif"/> </a> </li>
<li> <a href="#"> <img alt="11.gif"/> </a> </li>
<li> <a href="#"> <img alt="12.gif"/> </a> </li>
</ul>
</div>
</div>
<div class="picture_list_right" onclick="$('PictureListShow').scrollLeft -= 60;"> </div>
</div>

</body>
</html>
回复
发动态
发帖子
CSS
创建于2007-09-28

5.9w+

社区成员

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
申请成为版主
社区公告
暂无公告