css inline-block的几个神奇的用法
前言
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，实现起来是相对麻烦，且效果不尽如人意的！
相关文章
python-for x in range的用法(注意要点、细节)
这篇文章主要介绍了python-for x in range的用法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-10- 这篇文章主要介绍了gin 获取post请求的json body操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-15
- using 指令有两个用途： 允许在命名空间中使用类型，以便您不必限定在该命名空间中使用的类型。 为命名空间创建别名。 using 关键字还用来创建 using 语句 定义一个范围，将在此...2020-06-25
- PHP去除html、css样式、js格式的方法很多，但发现，它们基本都有一个弊端：空格往往清除不了 经过不断的研究，最终找到了一个理想的去除html包括空格css样式、js 的PHP函数。...2013-08-02
jquery ready函数、css函数及text()使用示例
.text更改内容 .css更改样式...2013-10-03- phpmyadmin config.inc.php配置示例...2013-09-29
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮，感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要介绍了Javascript for in的缺陷总结的相关资料,需要的朋友可以参考下...2017-02-08
React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程，文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了，防止大家踩坑，特此把解决方案分享到脚本之家平台，需要的朋友参考下吧...2021-06-21- 这篇文章主要介绍了解决vue scoped scss 无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-04
- 这篇文章主要介绍了Mybatis plus中使用in查询出错的问题及解决方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-06
- 最新版下载： http://www.csdn123.com/uploadfile/2015/0428/20150428062734485.zip 概要 iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生...2016-05-19
- 多个网站共用一个Mysql数据库时，为使数据库管理不混乱，一般采用不同的网站使用不同前缀名的方式进行区分。而如何批量修改已有数据库的前缀名呢？全部导出修改后再导入？还是一个表一个表的修改？今天我要介绍的是相对简单的...2015-10-21
- phpmyadmin是一款很不错的WEB对mysql数据库管理软件，如果你想创建数据库与设置用户权限我们必须操作用户的很高的权限，如ROOT权限，下面我来给大家介绍介绍。 先来配...2016-11-25
- 这篇文章主要介绍了C++中cin的用法详细,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-04-25
- 这篇文章主要介绍了C#中的try catch finally用法,以实例形式分析了try catch finally针对错误处理时的不同用法,具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 出现phpmyadmin不能登录是我在修改我mysql服务器密码之后导致的，后来百度了相关的原因，原来是修改了mysql密码之后我们还需要在phpmyadmin目录中去修改config.inc.php中...2016-11-25
vue-admin-template配置快捷导航的代码（标签导航栏）
这篇文章主要介绍了vue-admin-template配置快捷导航的方法（标签导航栏），本文通过实例代码给大家介绍的非常详细，对大家学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-09-04- 这篇文章主要为大家详细介绍了使用jQuery.Pin垂直滚动时固定导航的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-27
- 这篇文章主要为大家详细解析了BootStrap图片样式、辅助类样式和CSS组件源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-01-23