一个可以手写原型链的男人

解决inline-block元素的3个 bug

今天做需求的时候发现页面的li元素换行了。li的尺寸设置的是刚刚好的为什么会换行呐?而且另外一个相同的样式列表没有换行,这就更奇怪了。

《解决inline-block元素的3个 bug》

Bug1:出现空隙

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title>JS Bin</title>
 <style>
 div{
 display: inline-block;
 width:100px;
 height: 100px;
 background-color: rgb(233, 148, 148);
 }
 </style>
</head>

<body>
 <div></div>
 <div></div>
</body>

</html>

解决方法

1.去掉空格

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title>JS Bin</title>
 <style>
 div{
 display: inline-block;
 width:100px;
 height: 100px;
 background-color: rgb(233, 148, 148);
 }
 </style>
</head>

<body>
 <div></div><div></div>
</body>

</html>

2. 添加父元素,将父元素的 font-size 设置为0,然后在 inline-block 元素中将 font-size 设置为 14px

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title>JS Bin</title>
 <style>
 .parent{
 font-size:0;
 }
 .child{
 font-size:14px;
 display: inline-block;
 width:100px;
 height: 100px;
 background-color: rgb(233, 148, 148);
 }
 </style>
</head>

<body>
 <div class="parent">
 <div class="child"></div>
 <div class="child"></div>
 </div>
</body>

</html>

3. 使用margin-right

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title>JS Bin</title>
 <style>
 .child{
 display: inline-block;
 width:100px;
 height: 100px;
 background-color: rgb(233, 148, 148);
 margin-right:-5px;
 }
 </style>
</head>

<body>
 <div class="child"></div>
 <div class="child"></div>
</body>

</html>

4. 添加父元素,使用letter-spacing(该属性增加或减少字符间的空白(字符间距))

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title>JS Bin</title>
 <style>
 .parent{
 letter-spacing:-5px;
 }
 .child{
 display: inline-block;
 width:100px;
 height: 100px;
 background-color: rgb(233, 148, 148);
 }
 </style>
</head>

<body>
 <div class="parent">
 <div class="child"></div>
 <div class="child"></div>
 </div>
</body>

</html>

5. 使用word-spacing (该属性增加或减少单词间的空白(即字间隔))

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .parent{
      word-spacing:-5px;
    }
    .child{
      display: inline-block;
      width:100px;
      height: 100px;
      background-color: rgb(233, 148, 148);
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>

</html>

Bug2:设置inline-block 后,莫名其妙出现一些空白

<!doctype html>
<html>

<head>
 <meta charset="utf-8">
 <title>span设为inline-block之后下面的空白</title>
 <style>
 div{
 border:solid 1px rgb(202, 43, 43);
 width:250px;
 }
 span{
 display:inline-block;
 width:200px;
 height:200px;
 background-color:rgb(109, 195, 252);
 
 }
 </style>
</head>

<body>
 <div>
 <span></span>
 </div>
</body>

</html>

解决方法

使用vertical-align

<!doctype html>
<html>

<head>
 <meta charset="utf-8">
 <title>span设为inline-block之后下面的空白</title>
 <style>
 div{
 border:solid 1px rgb(202, 43, 43);
 width:250px;
 }
 span{
 display:inline-block;
 width:200px;
 height:200px;
 background-color:rgb(109, 195, 252);
 vertical-align:top;//新增
 }
 </style>
</head>

<body>
 <div>
 <span></span>
 </div>
</body>

</html>

Bug3:两个不同高度的 inline-block 元素顶部无法对齐

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title>JS Bin</title>
 <style>
 
 .child1{
 display: inline-block;
 width:100px;
 height: 100px;
 
 background-color: rgb(109, 195, 252);
 }
 .child2{
 display: inline-block;
 width:100px;
 height: 120px;
 background-color: rgb(233, 148, 148);
 }
 </style>
</head>

<body>
 
 <div class="child1"></div>
 <div class="child2"></div>

</body>

</html>

解决方法

还是使用vertical-align

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title>JS Bin</title>
 <style>
 
 .child1{
 display: inline-block;
 width:100px;
 height: 100px;
 vertical-align:top;//新增
 background-color: rgb(109, 195, 252);
 }
 .child2{
 display: inline-block;
 width:100px;
 height: 120px;
 background-color: rgb(233, 148, 148);
 }
 </style>
</head>

<body>
 
 <div class="child1"></div>
 <div class="child2"></div>

</body>

</html>

ReferFrom:解决inline-block元素的3个 bug – 前端分享 – SegmentFault 思否

点赞

发表评论