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>

10个回答

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

showbo
支付宝加好友偷能量挖,胡杨在等着我的召唤 回复Yohohohoo: 大部分有些标签不支持width,height这种属性,如div,a,但是都支持css的width/height(内联元素无效),所以建议是尽量设置css,而不是属性
2 年多之前 回复
m0_37710580
Mr.Daru 回复C币出货Q155132206: 顺便再问一下,css和设置属性的区别在哪里
2 年多之前 回复
showbo
支付宝加好友偷能量挖,胡杨在等着我的召唤 回复Yohohohoo: 用css,不要设置属性<div style="height:320px;width:5000px;background-color:green">
2 年多之前 回复
showbo
支付宝加好友偷能量挖,胡杨在等着我的召唤 回复Yohohohoo: 套在li的容器ul上。
2 年多之前 回复
m0_37710580
Mr.Daru <div height="320px" width="5000px" background-color="green"> 把这个套在li上层,div下层。结果变成了320*0,请问什么情况
2 年多之前 回复

这个可以的,你试试

 <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>

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

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

内部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;然后一个一个去定位。

m0_37710580
Mr.Daru 红色是显示这个div位置的,让div居中,position这里应该还是用relative
2 年多之前 回复
m0_37710580
Mr.Daru 不要滚动条,我更新了问题,大佬再看一下
2 年多之前 回复

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

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

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

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐