1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

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

作者:用户 来源:互联网 时间:2016-11-07 10:41:14

displaydivinline元素height宽度inline-block

谈谈inline-block的几个神奇的用法 - 摘要: 本文讲的是谈谈inline-block的几个神奇的用法,  前言   inline-block,我们平时用的很多,最普通的用法就是几个div在一行中显示,我们用display: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,实现起来是相对麻烦,且效果不尽如人意的!

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索display , div , inline , 元素 , height , 宽度 inline-block static inline 用法、inlinetable 用法、matlab inline用法、python inline用法、inline用法,以便于您获取更多的相关知识。

android studio-Android studio 神奇的tostring()

问题描述 Android studio 神奇的tostring() textView.setText(String.format("进程ID:%d\n activity Info:%s",getTaskId(),toString())); 萌新被这里的tostring()用法惊呆了,不是 obj.tostring() 之类的调用方式么,这里的 tos...

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

前言 inline-block,我们平时用的很多,最普通的用法就是几个div在一行中显示,我们用display:inline-block。今天之所以写这篇文章,主要是写inline-block的几个比较奇特的用法。 实现div宽度根据内容自适应 我们知道div是块级元素,假...

谈谈服务端缓存的几种用法

缓存是一个常谈常新的话题,作为一名服务端的技术,如果你入行一年都还没用过memcached类产品,那只能说你的公司实在太小了,或者你干的活实在太边缘了。 说起缓存,可能大家最直接想到的就是:“在数据库前面挡一层”...

谈谈数据库的字段设计的几个心得

谈谈数据库的字段设计的几个心得,有需要的朋友可以参考下。 数据库的字段设计有很多细节性的技巧,下面将过去在开发中体会到经验整理出来,做个备忘。tinyint 是-128到128 。当属性设置为unsigned的时候。最大值就是255了。...

也谈谈规范,JS代码的几个注意点

写JS代码差不多也有两年了吧,从刚开始的“初生牛犊不怕虎”乱写一通到后来也慢慢知道去规范一下自己写的代码。这种感觉就像是代码是你的作品,你希望它保持一份不仅干净而且也优雅的姿势。所以后来慢慢规范了自己写...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备