我是靠谱客的博主 彩色魔镜,这篇文章主要介绍CSS (三)display:inline-block的缝隙和错位问题,现在分享给大家,希望可以做个参考。

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

一、 缝隙问题

这里写图片描述

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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标准规范的表现,是元素书写的时候换行产生的空白符造成的问题。但不满足业务需求。完善这种的缝隙有如下几种方法:

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

这里写图片描述

复制代码
1
2
3
4
5
<body> <ul> <li>1111</li><li>2222</li><li>3333</li><li>4444</li><li>5555</li> </ul> </body>

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

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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>

排列错位问题

这里写图片描述

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<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值。

复制代码
1
2
3
4
5
6
7
.box{ border: 4px solid #000000; width: 200px; height: 200px; display: inline-block; vertical-align: top; }

这里写图片描述

最后

以上就是彩色魔镜最近收集整理的关于CSS (三)display:inline-block的缝隙和错位问题的全部内容,更多相关CSS内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(91)

评论列表共有 0 条评论

立即
投稿
返回
顶部