html – 当div宽度很小时停止包装图像

概述我有一个包含ul的div,每个li都有一张图片.我已经漂浮了剩下的图片,让它们排成一条直线但是一旦它到达div的末尾,它就会包裹起来.我希望这些图片继续向右,隐藏,以便我能够创建一个旋转木马.我的代码如下. HTML <div id="container"> <div class="lfbtn"></div> <ul id="image_container"> <l 我有一个包含ul的div,每个li都有一张图片.我已经漂浮了剩下的图片,让它们排成一条直线但是一旦它到达div的末尾,它就会包裹起来.我希望这些图片继续向右,隐藏,以便我能够创建一个旋转木马.我的代码如下.

HTML

<div ID="container">    <div ></div>    <ul ID="image_container">        <li >            <img src="" />        </li>    </ul>    <div ></div></div>

CSS

#container {    wIDth: 900px;    height: 150px;    margin: 10px auto;}#image_container {    position: relative;    left: 50px;    List-style-type: none;    wIDth: 700px;    height: 110px;    overflow: hIDden;}#image_container li {    display: inline-block;    padding: 7px 5px 7px 5px;    float: left; }.lfbtn {    background-image: url(../../img/left.gif);    background-repeat: no-repeat;    margin: 10px;    position: relative;    float: left;    top: -12px;    left: 50px;    height: 90px;    wIDth: 25px;}.rtbtn {    background-image: url(../../img/right.gif);    background-repeat: no-repeat;    height: 90px;    wIDth: 25px;    margin: 10px;    position: relative;    top: -101px;    left: 795px;}

提前致谢！

解决方法 更新您的风格以反映这一点：

<div ID="container">    <div ></div>    <div >        <ul ID="image_container" >            <li >                <img src="UnTitled-1.gif" />            </li>        </ul>    </div>    <div ></div>    <br  /></div>

您需要在包装ul的div上设置宽度,然后在其上设置溢出.将您的ul设置为具有一定的宽度,以便即使有很多li也不会包装.

说实话,我不确定为什么ul不能像div那样处理它,即使ul设置为显示块也是如此.任何CSS大师都要关注评论.

总结

以上是内存溢出为你收集整理的html – 当div宽度很小时停止包装图像全部内容，希望文章能够帮你解决html – 当div宽度很小时停止包装图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。