CSS （三）display：inline-block的缝隙和错位问题

最新推荐文章于 2024-05-23 07:58:38 发布

秋成

最新推荐文章于 2024-05-23 07:58:38 发布

阅读量3.2k

点赞数 1

分类专栏：前端知识积累文章标签： inline-block display 间隙错位

本文链接：https://blog.csdn.net/u012832088/article/details/82217158

版权

前端知识积累专栏收录该内容

17 篇文章 0 订阅

订阅专栏

display：inline-block的缝隙和错位问题

一、缝隙问题

这里写图片描述

<style type="text/css">
   *{
     border: 0;
     padding: 0;
     margin: 0;
   }
   ul li{
     display: inline-block;
     border: 1px solid #000000;
   }
</style>
<body>
    <ul>
      <li>1111</li>
      <li>2222</li>
      <li>3333</li>
      <li>4444</li>
      <li>5555</li>
    </ul>
  </body>

这每个li之间的间隙是符合W3C标准规范的表现，是元素书写的时候换行产生的空白符造成的问题。但不满足业务需求。完善这种的缝隙有如下几种方法：

一、书写的时候，省略空格

这里写图片描述

 <body>
    <ul>
      <li>1111</li><li>2222</li><li>3333</li><li>4444</li><li>5555</li>
    </ul>
  </body>

二、第一种方法，元素少的情况下还可以满足，但不符合实际业务开发。第二种方法就是设置父元素的`font-size:0px`，然后再设置各个子元素的`font-size`数值。

ul{
font-size: 0;
}
ul li{
  display: inline-block;
  border: 1px solid #000000;
  font-size: 14px;
}
 <body>
    <ul>
        <li>1111</li>
         <li>2222</li>
         <li>3333</li>
         <li>4444</li>
         <li>5555</li>
    </ul>
</body>

排列错位问题

这里写图片描述

<style type="text/css">
    .box{
      border: 4px solid #000000;
      width: 200px;
      height: 200px;
      display: inline-block;
    }
    .itemSmall_1{
      background-color: chartreuse;
      width: 40px;
      height: 40px;
      border: 2px solid #000000;
      /* float: left; */
    }
    .itemSmall_2{
      background-color: chartreuse;
      width: 40px;
      height: 40px;
      border: 2px solid #000000;
      float: left;
    }
    .itemBig1{
      background-color: blue;
      width: 150px;
      height: 150px;
      border: 2px solid #000000;
    }
    .itemBig2{
      background-color: blue;
      width: 150px;
      height: 150px;
      border: 2px solid #000000;
      float: left;
    }
  </style>
   <body>
    <div class="box">
      <div class="itemSmall_1">
      </div>
      <div class="itemBig1">
      </div>
    </div>

    <div class="box">
      <div class="itemSmall_2">
      </div>
      行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素
    </div>
  </body>

原因，可能是快元素和行元素的baseline不一样导致上下不齐，所以解决的办法就是设置统一的vertical-align属性。基于同一个baseline值。

.box{
    border: 4px solid #000000;
     width: 200px;
     height: 200px;
     display: inline-block;
     vertical-align: top;
}

这里写图片描述

秋成

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS （三）display：inline-block的缝隙和错位问题

display：inline-block的缝隙和错位问题一、缝隙问题&lt;style type="text/css"&gt; *{ border: 0; padding: 0; margin: 0; } ul li{ display: inline-block; border: 1px solid #00000...
复制链接

扫一扫