html css子容器宽度超过父容器时不直接换行

图片说明

问题：当li的超过div的时候就自动换行，我现在要怎么让他不换行？
网上查了一下，whiteSpace无效，而且好像是文字的，貌似不能用在这种地方
还有说不设置左浮动的，但是我这里是li，不设置左浮动不行啊

1.想做的效果是：向下的时候,所有的li向右移动一格li的宽度，li[n]的img的宽高变成li[n+1]的宽高，最左边生成一个img更小的li,通过改变左边距移动到li[0]的位置，img慢慢变成li[0]的img的大小，最右边的li则是img慢慢变小，慢慢透明，超过div宽度的部分就hidden，完成以后就删掉

2.现在问题是出在向右移动的时候超过div宽度的时候直接换行了，那效果就变成到右边距的时候最右边就消失了

不是很会描述问题，麻烦各位没看懂的问题的大大说一下是效果没描述清楚还是问题没描述清楚，我再想想怎么问


//F12复制过来的节点的属性

//div
<div id="slider" style="padding: 0px; height: 320px; width: 1024px; margin-top: 50px; margin-left: 171px; background-color: red; white-space: nowrap;">


//li
<li style="margin-left: 212px; display: inline; float: left; list-style-type: none; width: 200px; height: 320px; background-color: blue;">
            <img src="1.jpg" style="display: block; width: 150px; height: 225px; float: none; margin-top: 37.5px; margin-left: 25px;">
        <a style="display: block; width: 40px; height: 20px; margin-left: 80px;">0000</a>
        </li>

ul套个div容器，div设置width为9999999px，然后再放入红色的容器中，红色容器设置overflow auto或者hidden（需要用js设置ul div容器的scrollLeft才行移动显示隐藏的内容）

做一个人divde 百分比的限制条件。

li和div分别设置一个宽度，在div的样式中加一个overflow:hidden，你这样试试

li和div分别设置一个宽度，在div的样式中加一个overflow:hidden

再套一个div 这个div中宽度设为百分比如300%，将li 放进去 ,然后之前那个div设置宽度定值 超出隐藏即可

在你现在的li和div之间再插一个div，这个新增的div宽度给长点，比如9999px

这个可以的，你试试

 <html>
    <style type="text/css">
        div {
            white-space:nowrap
        }
        div li{
            display:inline-block;
            width:200px;
            height:200px;
        }
        li img {
            width: 100%;
            height: 100%;
        }
    </style>
    <body>
        <div>
            <li><img src="a.jpg"></li>
            <li><img src="a.jpg"></li>
            <li><img src="a.jpg"></li>
            <li><img src="a.jpg"></li>
            <li><img src="a.jpg"></li>
        </div>
    </body>
<html>

内部li设置float:left;display:inline,外部的div设置overflow:scroll。这样子在里面的图片超过外面的div的宽度时里面的li就可以横向滚动而不是换行了。

首先你的需求讲的有的模糊，根据你的描述
几个解决方案：1.你不介意有滚动条，你就把最外圈的宽度设置成非常大，这样li就可以并排，不过会出现横向滚动条。
2.如果你不想有滚动条，可以1的基础在body那边设置overflow-x：hidden；但是这样有些li会呗隐藏，看不到。
3.如果你要的只是有个红色的背景 但是不包裹全部的li，你可以设置包裹的div的宽，高，背景色。然后将li一个一个设置绝对定位：position: absolute;然后一个一个去定位。

在li标签中设置，超过父标签宽度时自动隐藏