您的位置：首页 > 其它

项目列表排列的两种方案

2012-11-16 17:53 190 查看

1.利用ul的负值来排列， margin负值相当于给ul增加了宽度 ,当然还要清楚下浮动才可以

demo1:

<style type="text/css">

*{margin:0;padding:0;}

ul{list-style:none;margin-right:-15px;overflow:hidden;}

div{width:210px;}

li{float:left; margin-right:15px; background:red; width:60px;}

</style>

</head>

<body>

<div>

<ul>

<li>sadasd</li>

<li>sadasd</li>

<li>sadasd</li>

<li>sadasd</li>

<li>sadasd</li>

</ul>

</div>

</body>

2.overflow:hidden+width ul给大宽度，外层给小宽度然后overflow:hidden隐藏掉多余的部分

demo2:

<style type="text/css">

*{margin:0;padding:0;}

ul{list-style:none;width:225px;overflow:hidden}

div{overflow:hidden;width:210px}

li{float:left; display:inline; margin-right:15px; background:red; }

img{width:60px;display:block}

</style>

</head>

<body>

<div>

<ul>

<li><img src="" alt="1" /></li>

<li><img src="" alt="2" /></li>

<li><img src="" alt="3" /></li>

<li><img src="" alt="4" /></li>

<li><img src="" alt="5" /></li>

</ul>

</div>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航