谈谈inline-block的几个神奇的用法_css

 

inline-block，我们平时用的很多，最普通的用法就是几个div在一行中显示，我们用display:inline-block。今天之所以写这篇文章，主要是写inline-block的几个比较奇特的用法。

 

实现div宽度根据内容自适应

 

我们知道div是块级元素，假如我们不设置宽度，那么div的宽度默认是100%；问：要想div宽度根据内容自适应怎么办？

 

请看下面代码：

 

<div class="parent">

  <div class="children">欢迎来到haorooms博客，这篇文章是关于inline-block的用法</div>

</div>

<style type="text/css">

.parent{

  width:800px;

  height:400px;

  border:1px solid red;

}

.children{

  border:1px solid blue;

  height:50px;

}

</style>

我们会看到，children会撑满parent，如何让children内容自适应呢？我们今天主要讲的是inline-block，没错，加上inline-block就可以了，我们把上面代码稍微改进！

 

.children{

  border:1px solid blue;

  height:50px;

  display:inline-block;

  *display:inline; //兼容低版本IE浏览器写法

  *zoom:1;//兼容低版本IE浏览器写法

}

div就会根据内容自适应了！

 

基于父级元素居中对齐

 

场景是这样的，有一个父级元素DIV，宽度是1000px;父级div里面有很多a标签，或者div，问，如何让其子元素居中对齐？

 

有的朋友这么做：

 

把所有的元素外层再包裹一个div，给div一个宽度，然后用margin:0 auto，这种方式对齐，这种方式对齐有个缺点，因为你的给宽度的div不可能完全包裹住里面的元素，这样里面的元素相对于最外层的div还是不会完全居中对齐。

 

用 inline-block方式：

 

父级div给一个text-align:center;所有子级元素给一个 display:inline-block;就可以了！

案例如下：

 

enter image description here

 

上图是切换的按钮，就是用inline-block对齐的。

 

<ul class="bottomControl">                                    

<li data-tab-index="0" class="Lpdot"></li>

<li data-tab-index="0" class="Lpdot lpCur"></li>

<li data-tab-index="0" class="Lpdot"></li>

<li data-tab-index="0" class="Lpdot"></li>

<li data-tab-index="0" class="Lpdot"></li>

</ul>

 

.bottomControl {

    height: 40px;

    width: 100%;

    text-align: center;

}

 

.Lpdot {

    width: 14px;

    height: 14px;

    margin: 15px 5px 0px 5px;

    background-color: #dfcea5;

    border-radius: 7px;

    display: inline-block;

    cursor: pointer;

}

小结

 

上面就是对inline-block的几点应用，虽然很简单，但是一旦你没有用inline-block，实现起来是相对麻烦，且效果不尽如人意的！