5.9w+
社区成员
- 主页
- 问答
怎么让div内的li不换行而直接隐藏
我在做一个图片展示的东西
一个div作容器通过scrollLeft左右滚动
已经用float:left;来水平排列
但里面的li（多个）总长度超过div长度就自动换到下一行
全部设了高度也是这样
现在只能是多放一个div设很大的长度来放li
请问怎么做才能做到想要的效果？
一个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>
...全文
请发表友善的回复…
发表回复
cloudgamer 2007-12-07
能用！
谢谢
谢谢
yixianggao 2007-12-07
用expression动态算宽度吧，俺想来想去这招最简单！
L@_@K
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>