<!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>
实现多个盒子间有边距且水平居中显示
最新推荐文章于 2023-02-24 17:02:08 发布
本文介绍如何使用CSS实现多个盒子元素在一行内水平居中,并且保持盒子之间的固定间距。通过理解Flexbox布局或者使用传统的margin负值和外边距对齐方法,你可以轻松达到这个效果。
摘要由CSDN通过智能技术生成