怎么让span并排不换行
日期：2014-05-17 浏览次数：20704 次
如何让span并排不换行。
向左向右滚动时,设置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="?
向左向右滚动时,设置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="?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
