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>
 
效果: