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;的宽度撑出横向浏览器滚动条,也要在一行上
...全文
1020 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导航菜单】是一种常见的网页交互设计，它允许用户在水平方向上浏览菜单项，为网站增加了一种现代且动态的用户体验。在本文中，我们将深入探讨如何使用jQuery实现这种效果，以及相关的HTML、CSS和...
利用纯css实现table固定列与表头中间横向滚动的思路和实例
设置`overflow: hidden`隐藏超出的内容，并使用`overflow-x: scroll`来启用横向滚动条。 为了实现固定列和表头的效果，我们需要将原本的表格拆分成三个部分：固定的第一列（如时间戳或ID），中间可滚动的列（包含...
js图片重复向上滚动.doc
处理横向滚动逻辑 } } ``` 此段代码是核心滚动逻辑。当方向为“up”时，如果当前滚动位置已经接近或等于复制内容的位置，则将滚动条重置到初始位置上方一定的距离（此处为20像素加上原内容的高度）。否则，滚动条...
横向滚动jQuery导航特效代码
【横向滚动jQuery导航特效代码】是一种常见的网页设计技术，它为用户提供了一种创新且互动的浏览体验。在传统的垂直导航栏基础上，这种横向滚动效果利用了JavaScript库jQuery的强大功能，使得菜单项能够在水平方向上...
学习使用jquery iScroll.js移动端滚动条插件
iScroll.js是一款专为移动端设计的滚动条插件，它主要解决了在WebKit浏览器（如iPhone、Android设备）中，由于浏览器自身的滚动性能问题而产生的滚动不流畅的现象。iScroll通过JavaScript实现了平滑、高效的滚动效果...
CSS

61,129

社区成员

60,711

社区内容

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

加载中

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

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

+ 用AI写文章