主页
问答

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;的宽度撑出横向浏览器滚动条,也要在一行上

...全文

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">


<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+

社区成员

6.0w+

社区内容

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

申请成为版主

社区公告

暂无公告