怎么让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>

...全文

855 2 打赏收藏转发到动态举报

写回复

用AI写文章

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>