实现多个盒子间有边距且水平居中显示

最新推荐文章于 2023-01-24 15:58:35 发布

qq_42880779

最新推荐文章于 2023-01-24 15:58:35 发布

阅读量389

点赞数

分类专栏： html+css 文章标签： css html

本文链接：https://blog.csdn.net/qq_42880779/article/details/112640600

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    /* 
         现需要：一行有四个盒子，居中显示。每个盒子宽200，高200盒子间距离50，一行显示4个盒子。且为了更新方便，需要经常添加新盒子。实现步骤：
         1.最外面大div宽=4*200+3*50=950， div{margin:0 auto;}水平居中显示
         2.div里嵌套ul , 给li加高宽200。
         3.给li加float-left，然后给li加margin-right：50px;
         4.由于div宽950，每个li宽200，margin-right=50,那么在ul不设置宽度的情况下，一行最多放三个li。因为最右边li的margin-right超出了div的宽度，就会挤下去。
         **5.**最重要的一步！给ul加宽度，ul宽度要大于 1000（250*4）
         5.1也可以给最右边的li添加类名，但当盒子数量多的时候，此方法很麻烦
         */
    <style>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_42880779

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
实现多个盒子间有边距且水平居中显示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 现需要：
复制链接

扫一扫