li如何使用overflow出现有滚动键的横向滚动条?

igyhi 2007-12-14 10:23:47
#h{}
#h ul{width:806px;margin:0 0;border:1px solid pink;overflow:scroll;}
#h ul li{list-style:none;float:left;}


<div id="h">
<ul id="demoh">
<div id="demoh1">
<li><img src="images/sk_logo2.gif" /></li>
<li><img src="images/sk_logo2.gif" /></li>
<li><img src="images/sk_logo2.gif" /></li>
<li><img src="images/sk_logo2.gif" /></li>
<li><img src="images/sk_logo2.gif" /></li>
<li><img src="images/sk_logo2.gif" /></li>
<li><img src="images/sk_logo2.gif" /></li>
</div>
</ul>
</div>

目的: left化的li 要出现在一行上.这一行实际横向排列后可能很宽,达到width:3000px;
所以需要一个overflow滚动条来滚动显示,滚动可视区域的宽是806px

问题: 当横向排列的li超出div的指定宽度时会自动折行
或者 当横向排列的li超出屏幕可视宽度范围时会自动折行
或者 当横向排列的li超出滚动可视区域的宽度范围会自动折行

要点:不让li折行,哪怕3000px;的宽度撑出横向浏览器滚动条,也要在一行上
...全文
749 点赞 收藏 4
写回复
4 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
igyhi 2007-12-14
滚动图片的div改写

特别感谢yixianggao提供的Css计算方式

=============

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>s.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
/*
EditAuthor:igyhi
Date:2007-12-14
*/
function pageinit()
{
var speed=2;
demov2.innerHTML=demov1.innerHTML;
demoh2.innerHTML=demoh1.innerHTML;

var MyMarV=setInterval(MarqueeV,speed);
demov.onmouseover=function() {clearInterval(MyMarV);}
demov.onmouseout=function() {MyMarV=window.setInterval(MarqueeV,speed);}

var MyMarH=setInterval(MarqueeH,speed);
demoh.onmouseover=function() {clearInterval(MyMarH);}
demoh.onmouseout=function() {MyMarH=window.setInterval(MarqueeH,speed);}
}
function MarqueeV()
{
if(demov2.offsetHeight-demov.scrollTop<=0)
demov.scrollTop-=demov1.offsetHeight;
else
{
demov.scrollTop++;
}
}
function MarqueeH()
{
if(demoh2.offsetWidth-h.scrollLeft<=0)
{
h.scrollLeft-=demoh1.offsetWidth;
}
else
{
document.getElementById('errorinfo').innerHTML=new Date();
document.getElementById('errorinfo2').innerHTML=h.scrollLeft;
h.scrollLeft++;
}
}
window.onload=pageinit;
</script>
<style type="text/css">
#v{width:220px;text-align:center;border:1px solid pink;}
#v ul{height:330px;margin:0 0;overflow:hidden;}
#v ul li{list-style:none;margin:4px 0;}

#h{width:614px;border:1px solid pink;overflow:hidden;}
#h ul{height:62px;margin:0 0;width:expression(childNodes.length*210*7);}
#h ul li{list-style:none;margin:2px 2px;float:left;}

.img{background:azureblue;width:200px;height:62px;border:1px solid darkred;}
</style>
</head>
<body>
<!-- 纵向滚动 -->
<div id="v">
<ul id="demov">
<div id="demov1">
<li><span class="img"><tt>Image</tt></span></li>
<li><span class="img"></span></li>
<li><span class="img"></span></li>
<li><span class="img"></span></li>
<li><span class="img"></span></li>
<li><span class="img"></span></li>
<li><span class="img"></span></li>
</div>
<div id="demov2"></div>
</ul>
</div>

<div style="height:10px;"></div>

<!-- 横向滚动 -->
<div id="h">
<ul id="demoh">
<div id="demoh1">
<li><span class="img"><tt>Image</tt></span></li>
<li><span class="img"></span></li>
<li><span class="img"></span></li>
<li><span class="img"></span></li>
<li><span class="img"></span></li>
<li><span class="img"></span></li>
<li><span class="img"></span></li>
</div>
<div id="demoh2"></div>
</ul>
</div>
<div id="errorinfo"></div>
<div id="errorinfo2"></div>
</body>
</html>
回复
yixianggao 2007-12-14
也可以不写到css中,后面用js单独控制!
两种写法原理一样,位置不同而已,
但缺点是必须设置li的width属性,不能自由变化!
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">
#h
{
height: 55px;
width: 806px;
overflow: auto;
color: white;
}
#h ul
{
background-color: blue;
margin: 0px;
border: 1px solid pink;
}
#h ul li
{
list-style: none;
float: left;
width: 200px;
margin-right: 10px;
background-color: red;
}

</style>
</head>
<body>
<div id="h">
<ul id="demoh">
<li>
<img src="" alt="1" />
</li>
<li>
<img src="" alt="2" />
</li>
<li>
<img src="" alt="3" />
</li>
<li>
<img src="" alt="4" />
</li>
<li>
<img src="" alt="5" />
</li>
<li>
<img src="" alt="6" />
</li>
<li>
<img src="" alt="7" />
</li>
</ul>
</div>
<script type="text/javascript">
<!--
var liWidth = parseInt(demoh.firstChild.currentStyle.width) + parseInt(demoh.firstChild.currentStyle.marginRight);
demoh.style.width = liWidth * demoh.childNodes.length;
//-->
</script>
</body>
</html>
回复
igyhi 2007-12-14
居然用到了计算?必须这样么?
头次正式使用css计算,我看下

话说这css里写逻辑的都不是一般人呐
回复
yixianggao 2007-12-14
用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">
#h
{
height: 55px;
width: 806px;
overflow: auto;
color: white;
}
#h ul
{
background-color: blue;
margin: 0px;
border: 1px solid pink;
width: expression(childNodes.length * 210);
}
#h ul li
{
list-style: none;
float: left;
width: 200px;
margin-right: 10px;
background-color: red;
}

</style>
</head>
<body>
<div id="h">
<ul id="demoh">
<li>
<img src="" alt="1" />
</li>
<li>
<img src="" alt="2" />
</li>
<li>
<img src="" alt="3" />
</li>
<li>
<img src="" alt="4" />
</li>
<li>
<img src="" alt="5" />
</li>
<li>
<img src="" alt="6" />
</li>
<li>
<img src="" alt="7" />
</li>
</ul>
</div>
</body>
</html>
回复
发动态
发帖子
CSS
创建于2007-09-28

5.9w+

社区成员

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