与我们合作
我们专注：网站策划设计、网络多媒体传播、网站优化及网站营销、品牌策略与设计
主营业务：网站建设、移动端微信小程序开发、VI设计、网络运营、云产品·运维解决方案
有一个品牌项目想和我们谈谈吗?
您可以填写右边的表格，让我们了解您的项目需求，这是一个良好的开始，我们将会尽快与您取得联系。当然也欢迎您给我们写信或是打电话，让我们听到您的声音
您也可通过下列途径与我们取得联系：
地 址: 深圳.龙岗区大运软件小镇11栋3楼
电 话: 138 2888 4598 / 138 0880 9053
网 址: http://www.appvx.cn
快速提交您的需求 ↓
inline-block，我们平时用的很多，最普通的用法就是几个div在一行中显示，我们用display:inline-block。今天之所以写这篇文章，主要是写inline-block的几个比较奇特的用法。
实现div宽度根据内容自适应
我们知道div是块级元素，假如我们不设置宽度，那么div的宽度默认是100%；问：要想div宽度根据内容自适应怎么办？
请看下面代码：
<div class="parent">
<div class="children">欢迎来到深正互联，这篇文章是关于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;就可以了！
<ul class="Center">
<li data-tab-index="0" class="Li"></li>
<li data-tab-index="0" class="Li Cur"></li>
<li data-tab-index="0" class="Li"></li>
<li data-tab-index="0" class="Li"></li>
<li data-tab-index="0" class="Li"></li>
</ul>
.Center {
height: 40px;
width: 100%;
text-align: center;
}
.Li {
width: 14px;
height: 14px;
margin: 15px 5px 0px 5px;
background-color: #dfcea5;
border-radius: 7px;
display: inline-block;
cursor: pointer;
}
上面就是对inline-block的几点应用，虽然很简单，但是一旦你没有用inline-block，实现起来是相对麻烦，且效果不尽如人意的！
本站文章均为深正网站建设摘自权威资料，书籍，或网络原创文章，如有版权纠纷或者违规问题，请即刻联系我们删除，我们欢迎您分享，引用和转载，但谢绝直接搬砖和抄袭！感谢...
