如何让span并排不换行。

xtxc 2012-09-28 10:23:06
向左向右滚动时,设置table宽值为400%时，能滚动，但span总宽度不足400%时，span之间有间隙，span总宽度超过400%时，不显示。
如何让span并排不换行，且table自动随图片多少自动宽度无缝滚动。
<!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></title>
<meta http-equiv="Content-Type" Content="text/html; charset=gb2312" />
<meta name="description" Content="" />
<meta name="keywords" Content="" />
<meta http-equiv="X-UA-Compatible" Content="IE=EmulateIE7" />
<script type="text/javascript" src="http://www.popub.net/script/MSClass.js"></script>
<style>
*{ font-size:12px;}
.Margin{ width:590px; height:120px;}
#ScrollLeft{ float:left; display:block; width:20px; height:120px; background:url(UserThemes/hyfc/Include/arrows.png) no-repeat left center; cursor:pointer}
#ScrollRight{ float:right; display:block; width:20px; height:120px; background:url(UserThemes/hyfc/Include/arrows.png) no-repeat right center; cursor:pointer}
#demoMarquee{ float:left; display:block; width:550px; height:120px;}
#demoMarquee table{ float:left; display:inline; float:left; cssfloat:left; }
Span#SliderShow{ float:left; display:inline; white-space:nowrap;}
#demoList{ float:left; display:inline;white-space:nowrap;}
#SliderShow{float:left; display:inline-block; width:125px; height:120px; text-align:center; margin:3px; _margin:2px; white-space:nowrap}
#SliderShow img{ width:120px; height:90px; margin:0px; border:0;}
#SliderShow .PicA{border:2px solid #734A12; display:block;}
#SliderShow .PicA:hover{border:2px solid #aa5e00; display:block;}
#SliderShow .TitleA{ display:block;}
#SliderShow .aSliderPicture{border:1px solid #888888; display:block;}
#SliderShow .aSliderPicture:hover{border:1px solid #333333; display:block;}
</style>
</head>
<body>
<Div Class="Content">
<Div ID="NavLeft"></Div>
<Div ID="NavRight"></Div>
<Div Class="Margin">
<Div Id="ScrollLeft"></Div><Div Id="ScrollRight"></Div>
<div id="demoMarquee">
<div id="demoList"><Span ID="SliderShow"><a href="?pid=7197" target="_blank" Title="互益赏鉴" Class="PicA"><IMG src="/2012927103558710.jpg" border=0></a><a href="?pid=7197" target="_blank" Title="互益赏鉴" Class="TitleA">互益赏鉴</a></Span><Span ID="SliderShow"><a href="?pid=7196" target="_blank" Title="互益赏鉴" Class="PicA"><IMG src="/201292710362377.jpg" border=0></a><a href="?pid=7196" target="_blank" Title="互益赏鉴" Class="TitleA">互益赏鉴</a></Span><Span ID="SliderShow"><a href="?pid=7195" target="_blank" Title="互益赏鉴" Class="PicA"><IMG src="/201292710367560.jpg" border=0></a><a href="?pid=7195" target="_blank" Title="互益赏鉴" Class="TitleA">互益赏鉴</a></Span><Span ID="SliderShow"><a href="?pid=7194" target="_blank" Title="互益赏鉴" Class="PicA"><IMG src="/2012927103612372.jpg" border=0></a><a href="?pid=7194" target="_blank" Title="互益赏鉴" Class="TitleA">互益赏鉴</a></Span><Span ID="SliderShow"><a href="?pid=7193" target="_blank" Title="互益赏鉴" Class="PicA"><IMG src="/2012927103617813.jpg" border=0></a><a href="?pid=7193" target="_blank" Title="互益赏鉴" Class="TitleA">互益赏鉴</a></Span><Span ID="SliderShow"><a href="?pid=7192" target="_blank" Title="互益赏鉴" Class="PicA"><IMG src="/201292712841224.jpg" border=0></a><a href="?pid=7192" target="_blank" Title="互益赏鉴" Class="TitleA">互益赏鉴</a></Span><Span ID="SliderShow"><a href="?pid=7191" target="_blank" Title="互益赏鉴" Class="PicA"><IMG src="/2012927121420984.jpg" border=0></a><a href="?pid=7191" target="_blank" Title="互益赏鉴" Class="TitleA">互益赏鉴</a></Span></div></DIV>
<script type="text/javascript">
function $M(id){return document.getElementById(id)};
var DualMarquee=new Marquee("demoMarquee");
DualMarquee.Direction="left";
DualMarquee.Step=1;
DualMarquee.Timer=20;
DualMarquee.ScrollStep=1;
DualMarquee.Start();
DualMarquee.BakStep=DualMarquee.Step;
$M("ScrollLeft").onmouseover=function(){DualMarquee.Direction=2;};
$M("ScrollLeft").onmouseout=$M("ScrollLeft").onmouseup=function(){DualMarquee.Step=DualMarquee.BakStep};
$M("ScrollLeft").onmousedown=$M("ScrollRight").onmousedown=function(){DualMarquee.Step=DualMarquee.BakStep+3};
$M("ScrollRight").onmouseover=function(){DualMarquee.Direction=3;};
$M("ScrollRight").onmouseout=$M("ScrollRight").onmouseup=function(){DualMarquee.Step=DualMarquee.BakStep};
</script></Div></Div></DIV></div>
</body>
</html>
...全文
3334 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
敢不敢在来一次 2013-10-12
  • 打赏
  • 举报
 回复
xtxc 2012-09-29
  • 打赏
  • 举报
 回复
求不设置table值的方法，使其滚动？
table设置为400%-800%的话，是可以滚动的，但不是无缝滚动，意味着图片多少时，table必须手工计算好长度才可以保证无缝，这不是我需要的技巧。
xtxc 2012-09-29
  • 打赏
  • 举报
 回复
没起上作用，不知道是不是要设置style
span还是自动转行
孟子E章 2012-09-29
  • 打赏
  • 举报
 回复
<div id="demoList">
<nobr><span>.....
xtxc 2012-09-29
  • 打赏
  • 举报
 回复
是不是disply:inline-block可以强制同行，有了float:left后，就会自动换行？
xtxc 2012-09-29
  • 打赏
  • 举报
 回复
net_lover
正解，满40分，结贴前有个疑问请教？

#demoList去掉float:left; display:inline;white-space:nowrap;}
#SliderShow去掉float:left;
就可以了，为什么这样就能滚动并且不换行，<nobr>也未用到。

麻烦您帮我疏理一下，在线等。
孟子E章 2012-09-29
  • 打赏
  • 举报
 回复
去掉float:

改成这样

<style>
*{ font-size:12px;}
.Margin{ width:590px; height:120px;}
#ScrollLeft{ float:left; display:block; width:20px; height:120px; background:url(UserThemes/hyfc/Include/arrows.png) no-repeat left center; cursor:pointer}
#ScrollRight{ float:right; display:block; width:20px; height:120px; background:url(UserThemes/hyfc/Include/arrows.png) no-repeat right center; cursor:pointer}
#demoMarquee{ float:left; display:block; width:550px; height:120px;}
#demoMarquee table{ float:left; display:inline; float:left; cssfloat:left; }

#SliderShow{display:inline-block; width:125px; height:120px; text-align:center; margin:3px; _margin:2px; white-space:nowrap}
#SliderShow img{ width:120px; height:90px; margin:0px; border:0;}
#SliderShow .PicA{border:2px solid #734A12; display:block;}
#SliderShow .PicA:hover{border:2px solid #aa5e00; display:block;}
#SliderShow .TitleA{ display:block;}
#SliderShow .aSliderPicture{border:1px solid #888888; display:block;}
#SliderShow .aSliderPicture:hover{border:1px solid #333333; display:block;}
</style>
xtxc 2012-09-29
  • 打赏
  • 举报
 回复
#demoMarquee{ float:left; display:block; width:550px; height:120px;}

要的就是这个宽度
孟子E章 2012-09-29
  • 打赏
  • 举报
 回复
你这个
#demoMarquee{ float:left; display:block; width:550px; height:120px;}

宽度不够，可以改成

#demoMarquee{ float:left; display:block; width:1000px; height:120px;}
js使用小技巧
让英文字符串超出表格宽度自动换行 word-wrap: break-word; word-break: break-all; 透明背景 <IFRAME src="1.htm" width=300 height=180 allowtransparency></iframe> 获得style内容 obj.style.cssText ...
html位置并排不换行,div并排不换行显示 DIV并排显示
div并排不换行显示之CSS实现默认情况下在CSS布局中，我们知道div盒子单独占一行是强制换行的。但有时候我们又想让两个或两个以上div盒子并排放着如何实现呢？下面我们就看如何实现div不换行并排着。方法有三种，第一...
css 两个span换行问题
可以使用对span标签样式设置为 display:inline-block;
将两个span标签并列
于是我们开始想怎么样可以让两个span不换行 ，并列起来。刚开始我们将这个语句写在style中。 这样确实是两个价格在同一行了，但出来的效果不是我们想要的，因为这个布局让价格往上靠了一点，也影响到了下面图片的...
html中怎样让多个块级并排,CSS 让div,span等块级、非快级元素排列在同一行
让div,span等块级、非快级元素排列在同一行by:授客qq：1033553122例子：让两个div排列在同一行给div添加float样式div{float: left;}div1div2说明：让div和span排列在一起也可以用上述上方法例子：让div和两个span...
CSS

61,112

社区成员

60,730

社区内容

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

加载中

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

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

+ 用AI写文章