在div中的ul li 横向显示，超出的部分不能隐藏怎么办？？
想用ulli标签做图片滚动，嵌套在一个div中并设置了overflow:hidden。li标签设置float:left使标签横向显示。但是li标签会在div中自动换行，而...
想用ul li 标签做图片滚动，嵌套在一个div中 并设置了 overflow:hidden 。li 标签设置 float:left使标签横向显示。 但是li标签会在div中自动换行，而不是被隐藏。如果设置div display：inline，li标签就会溢出。hidden就会失效！所以在这里求高人指点！！
以下是 style 和 代码
<style type="text/css">
.divCSS{
width: 400px;
height:200px;
overflow: hidden;
border: 1px solid #DEDEDE;
}
.divCSS ul{
list-style: none;
margin: 0;
padding: 0;
}
.divCSS ul li{
float: left;
width:60px;
height:60px;
border: 1px solid #DEDEDE;
margin-left:10px;
}
</style>
<body>
<div class="grace-cabinet" >
<ul>
<li><img src="img/phone-img/1447211984495.png"></li>
<li><img src="img/phone-img/1447211984495.png"></li>
<li><img src="img/phone-img/1447211984495.png"></li>
<li><img src="img/phone-img/1447211984495.png"></li>
<li><img src="img/phone-img/1447211984495.png"></li>
<li><img src="img/phone-img/1447211984495.png"></li>
<li><img src="img/phone-img/1447211984495.png"></li>
<li><img src="img/phone-img/1447211984495.png"></li>
</ul>
</div>
</body>
应该是 <div class="divCSS" >。拷贝错了 展开
以下是 style 和 代码
<style type="text/css">
.divCSS{
width: 400px;
height:200px;
overflow: hidden;
border: 1px solid #DEDEDE;
}
.divCSS ul{
list-style: none;
margin: 0;
padding: 0;
}
.divCSS ul li{
float: left;
width:60px;
height:60px;
border: 1px solid #DEDEDE;
margin-left:10px;
}
</style>
<body>
<div class="grace-cabinet" >
<ul>
<li><img src="img/phone-img/1447211984495.png"></li>
<li><img src="img/phone-img/1447211984495.png"></li>
<li><img src="img/phone-img/1447211984495.png"></li>
<li><img src="img/phone-img/1447211984495.png"></li>
<li><img src="img/phone-img/1447211984495.png"></li>
<li><img src="img/phone-img/1447211984495.png"></li>
<li><img src="img/phone-img/1447211984495.png"></li>
<li><img src="img/phone-img/1447211984495.png"></li>
</ul>
</div>
</body>
应该是 <div class="divCSS" >。拷贝错了 展开
1个回答
展开全部
li设置为float后，超过容器宽度它就会换行，这是正常的。你可以给ul设置一个相当于全部li宽度的总宽度。通过ul来控制，由于上层div设置了overflow:hidden,所以超出的部分不会被显示的。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
