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;的宽度撑出横向浏览器滚动条,也要在一行上
...全文
1019 4 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
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>
横向滚动jQuery导航菜单
jquery 版本的横向移动菜单， 带有过渡感觉的 还不错 代码也比较简单 易懂 适合初学者学习 模仿
利用纯css实现table固定列与表头中间横向滚动的思路和实例
主要给大家介绍了关于如何利用纯css实现table固定列与表头，中间横向滚动的相关资料，文中通过示例代码详细的给大家介绍了关于实现该效果的思路与方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
js图片重复向上滚动.doc
js图片重复向上滚动.doc
横向滚动jQuery导航特效代码
横向滚动jQuery导航代码是一款仿FLASH效果的滑动导航菜单代码，站长素材推荐下下载。
学习使用jquery iScroll.js移动端滚动条插件
大家在日常工作中最常用的插件是什么，jQurey？Lazyload？但是这些都是在PC端，但是在移动端最常用的插件莫过于iScroll了，iScroll到底是什么东西，应该怎么用？iScroll是个很强大的插件，我也只是略懂皮毛，这里我们简单的介绍一下。 iScroll的产生： iScroll的产生完全是因为移动版webkit浏览器，例如在iPhone，Android 的移动设备上。 iScroll的使用方法： iScroll的原理是外层有一个溢出隐藏（overflow:hidden;）的DOM，然后这个区域内的第一个DOM结构会被实例化，其包裹的内容可以纵向或者横向的滚动，所以在使用iScr
CSS

61,129

社区成员

60,711

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章