li不换行的css
作者:陆金龙
发表时间:2015-08-08 22:40
实现li内容不换行
方法一:
ul{
margin:0;
padding:0;
list-style:none;
display:inline;
}
li {
float:left;
margin: 0px 20px 10px 0px;
}
方法二:
<!DOCTYPE html>
<html>
<head>
<style>
#wrap
{
display:block;
white-space:nowrap;
overflow:auto;
background-color:blue;
}
#wrap li
{
width:80px;
height:80px;
background-color:red;
display:inline-block;
}
</style>
</head>
<body>
<div id="wrap">
<ul>
<li>11111111111</li>
<li>222222222222</li>
<li>33333333333</li>
<li>44444444444</li>
<li>5555555555</li>
<li>6666666666</li>
<li>7777777777</li>
<li>888888888</li>
<li>9999999999</li>
</ul>
</div>
</body>
</html>
效果: