设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 如何让六个小li顺利在红色盒子里
返回列表 发新帖
查看: 3678|回复: 1

如何让六个小li顺利在红色盒子里

[复制链接]
小黄练编程
发表于 2022-3-12 12:17:44 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <meta charset="utf-8">
  6.     <style>
  7.    
  8.         .kuai{
  9.             width:1920px;
  10.             height:767px;
  11.             margin:0 auto;
  12.         }
  13.         .kuai .box1{
  14.             width:1202px;
  15.             height:767px;
  16.             background-color:aqua;
  17.         }
  18.         .kuai .box2{
  19.             width:870px;
  20.             height:679px;
  21.             background-color:red;
  22.         }
  23.         .kuai .box2 ul li{
  24.             width:273px;
  25.             height:306px;
  26.             margin-right:px;
  27.             margin-bottom:40px;
  28.             list-style-type:none;
  29.             display:inline-block;
  30.             float:left;
  31.             background-color:pink;
  32.         }
  33.         .kuai.box3{
  34.             width:300px;
  35.             height:679px;
  36.             /* float:right; */
  37.             background-color:yellow;
  38.         }
  39.         .margin_right{
  40.             margin-right:0px;
  41.         }
  42.     </style>
  43. </head>
  44. <body>
  45.     <div class="kuai">
  46.         <div class="box1">
  47.             <div class="box2">
  48.                 <ul>
  49.                     <li><img></li>
  50.                     <li><img></li>
  51.                     <li class="margin_right"><img></li>
  52.                     <li><img></li>
  53.                     <li><img></li>
  54.                     <li class="margin_right"><img></li>
  55.                 </ul>
  56.             </div>
  57.             <div class="box3"></div>
  58.         </div>
  59. </body>
  60. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

_帅
发表于 2022-3-13 14:27:09 | 显示全部楼层
同学，你描述不太清楚。推荐使用flex布局。或者给ul一个伪类样式来清浮动。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-4-19 04:22

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表