您的位置:阿里西西 > 前端技术 > CSS教程 > 详细内容

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

  本站整理   互联网   2016-11-07   点击:   我要评论

 前言

 
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,实现起来是相对麻烦,且效果不尽如人意的!


更多关于 的文章
相关阅读
会员评论所有会员评论

  

相关排行总榜

网页教程

站长文章

特效排行