网格

最新推荐文章于 2025-08-23 15:08:19 发布

原创最新推荐文章于 2025-08-23 15:08:19 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

html+css 专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了一种使用CSS实现特定布局的方法。通过调整外边距、内边距、宽度及高度等属性，使得列表项能够精确地排列在指定位置。特别针对ul元素的宽度设置进行了深入探讨，确保其能够完美适配父容器的同时，还能容纳所有子项。

这里写图片描述

CSS样式：


<style>
  * {
    padding: 0;
    margin: 0;
  }
    .box {
      width: 190px;
    }
    .box ul {
      margin-left: -1px;/*右移1px*/
      width: 192px;/*ul的宽要比外面盒子的宽190px还要宽2px即为192px（li宽47*4）+四个左边框=47*4+4=192*/
      height: 210px;
      background-color: pink;
    }
    .box ul li {
      position: relative;
      overflow: hidden;
      float: left;
      width: 47px;
      height: 69px;
      border-top: 1px solid #e7e7e7;
      border-left: 1px solid #e7e7e7;
      text-align: center;
    }
  </style>

HTML代码：

<div class="box">
    <ul>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
    </ul>
  </div>