<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*此方法可以完美的解决最右边的盒子不需要特别设置margin-right:0的问题;*/ /*要点:1 最外面的盒子设置为自已所需要的宽度 2 里面包含所要排列的若干个盒子的块宽度设置为父盒子宽度加上多余的margin-right的宽度 3 为父盒子设置overflow:hidden */ *{ margin:0; padding:0; } .out_wrap{ width:900px; height:500px; background:black; overflow: hidden; margin:0 auto; } .lists{ width:990px; } .item{ width:280px; height:100px; float:left; margin-right:50px; background:red; } </style> </head> <body> <div class="out_wrap"> <ul class="lists"> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul> </div> </body> </html>
CSS中overfloat的小技巧
最新推荐文章于 2022-06-02 16:27:57 发布