怎样能让多个图片 或者a标签 或者div不增加scrollTop 而增加scrollLeft????

Question

下面这样家在多个图片 但是图片会在超出父div高度或宽度的时候 只增加scrollTop 而不增加scrollLeft因为文字可以撑大scrollLeft
所以用了display:inline; float:left;试了试都不行不撑大scrollLeft  就不能实现滚动 
请问大家都怎么解决的啊？？？？
<style>

#b{
float:left;
}
a,img{
display:inline;
}
</style>
    <div id=a style="width:400px;height:100px;background:red;overflow:scroll">
    <a href="#"><img id=b width="68" height="68" src="../1.jpg"/></a>
<a href="#"><img width="68" height="68"  src="../2.jpg"/></a>
<a href="#"><img width="68" height="68"  src="../3.jpg"/></a>
<a href="#"><img width="68" height="68"  src="../4.jpg"/></a>
<a href="#"><img width="68" height="68"  src="../5.jpg"/></a>
<a href="#"><img width="68" height="68"  src="../6.jpg"/></a>
<a href="#"><img width="68" height="68"  src="../7.jpg"/></a>    </div>
    
    <script>
        var a=document.getElementById("a");
var c=function(){
for(var i=1;i<500;i++)document.getElementById("a").scrollLeft++;
}
a.onclick=c//点红方块一下 ie和ff速度不一样
    </script>

Answer 1

<table>
<tr>
    <td><a href="#"><img id=b width="68" height="68" src="../1.jpg"/></a></td>
    <td><a href="#"><img width="68" height="68"  src="../2.jpg"/></a></td>
    <td><a href="#"><img width="68" height="68"  src="../3.jpg"/></a></td>
    <td><a href="#"><img width="68" height="68"  src="../4.jpg"/></a></td>
    <td><a href="#"><img width="68" height="68"  src="../5.jpg"/></a></td>
    <td><a href="#"><img width="68" height="68"  src="../6.jpg"/></a></td>
    <td><a href="#"><img width="68" height="68"  src="../7.jpg"/></a></td>
</tr>
</table>

Answer 2

    <table >
    <tr style="width:100px;overflow:scroll">
    <td><a href="#"><img id=b width="68" height="68" src="../1.jpg"/></a></td>
    <td><a href="#"><img width="68" height="68"  src="../2.jpg"/></a></td>
    <td><a href="#"><img width="68" height="68"  src="../3.jpg"/></a></td>
    <td style="display:none"><a href="#"><img width="68" height="68"  src="../4.jpg"/></a></td>
    <td style="display:none"><a href="#"><img width="68" height="68"  src="../5.jpg"/></a></td>
    <td style="display:none"><a href="#"><img width="68" height="68"  src="../6.jpg"/></a></td>
    <td style="display:none"><a href="#"><img width="68" height="68"  src="../7.jpg"/></a></td>    </tr>
    </table>虽然可以使用display之显示部分图片但是这样怎么让其滚动啊？？ 因为没有形成滚动条  怎么滚动？？？

Answer 3

哦，误会了，我的意思是把那些<a>标签放到table里去，外面还是要套DIV的

Answer 4

    <style>
        
        #b{
            float:left;
        }
        a,img{
            display:inline;
        }
    </style>
    <div id=a style="width:400px;height:100px;background:red;overflow:scroll">
<table>
<tr>
    <td><a href="#"><img id=b width="68" height="68" src="../1.jpg"/></a></td>
    <td><a href="#"><img width="68" height="68"  src="../2.jpg"/></a></td>
    <td><a href="#"><img width="68" height="68"  src="../3.jpg"/></a></td>
    <td><a href="#"><img width="68" height="68"  src="../4.jpg"/></a></td>
    <td><a href="#"><img width="68" height="68"  src="../5.jpg"/></a></td>
    <td><a href="#"><img width="68" height="68"  src="../6.jpg"/></a></td>
    <td><a href="#"><img width="68" height="68"  src="../7.jpg"/></a></td>
</tr>
</table>
    </div>
    
    <script>
        var a=document.getElementById("a");
        var c=function(){
        for(var i=1;i<500;i++)document.getElementById("a").scrollLeft++;
        }
        a.onclick=c//点红方块一下 ie和ff速度不一样
    </script>

Answer 5

效果都能出来 但是在ff下  居然把我的机子弄卡了 
我的可是2g的内存啊 ie下很正常   ff下卡成这样  可不行啊 

Answer 6

<style>
ul,ul li{margin:0;padding:0;display:inline;float:left;}
ul{height:100px;width:504px;}
</style>
<div id=a style="width:400px;height:100px;background:red;overflow:scroll;overflow-y:hidden">
<ul>
<li><a href="#"><img id=b width="68" height="68" src="../1.jpg"/></a></li>
<li><a href="#"><img width="68" height="68"  src="../2.jpg"/></a></li>
<li><a href="#"><img width="68" height="68"  src="../3.jpg"/></a></li>
<li><a href="#"><img width="68" height="68"  src="../4.jpg"/></a></li>
<li><a href="#"><img width="68" height="68"  src="../5.jpg"/></a></li>
<li><a href="#"><img width="68" height="68"  src="../6.jpg"/></a></li>
<li><a href="#"><img width="68" height="68"  src="../7.jpg"/></a></li>
</ul>
</div>
    
    <script>
        var a=document.getElementById("a");
        var c=function(){
        for(var i=1;i<500;i++)document.getElementById("a").scrollLeft++;
        }
        a.onclick=c//点红方块一下 ie和ff速度不一样
    </script>

Answer 7

分享下自己观看google的方法把下面clip的position设为relative  ,thumblist的position设为absolute 改变thumblist的style的left属性 就能实现其滚动
<div class="clip">
        <div id="thumblist" style="left: 0px;">
            <a id=ss onclick="" href="#"><span><img width="68" height="68" alt="谭盾" src="../1.jpg"/></span>谭盾</a>
<a id=ss onclick="" href="#"><span><img width="68" height="68" alt="谭盾" src="../1.jpg"/></span>谭盾</a>
<a id=ss onclick="" href="#"><span><img width="68" height="68" alt="谭盾" src="../1.jpg"/></span>谭盾</a>

        </div>
    </div>