最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

浅谈inline-block的多种使用方法

Inline-block最普通的用法就是几个div在一行显示,然后我们用display:inline-block。当然这只是最简单的,我只所以要整理一篇文章主要是inline-block还有几个不为人知的奇特用法,相信大家拭目以待了吧,一起来看一下。

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

Div是一个块级元素,假如我们不去设置他的宽度,这是div的宽度就会是默认100%,那么我要是想当div的宽度根据内容自适应怎么办?

Css代码:

.parent{
  width:800px;
  height:400px;
  border:1px solid red;
}
.children{
  border:1px solid blue;
  height:50px;
}

HTML代码:

<div class="parent">
  <div class="children">欢迎来到码云笔记,这篇文章是关于inline-block的用法</div>
</div>

效果图:

浅谈inline-block的多从使用方法

通过上面的代码,我们会看到,children会撑满parent,那么如何才能让children内容自适应呢?这就用到我们今天要讲的inline-block就可以了,我们稍微对代码改进一下就可以了。

.children{
  border:1px solid blue;
  height:50px;
  display:inline-block;
  *display:inline; //兼容低版本IE浏览器写法
  *zoom:1;//兼容低版本IE浏览器写法
}

如图:

浅谈inline-block的多从使用方法

通过加入inline-block使得div就会根据内容自适应了!是不是很神奇呢。

二、基于父级元素居中对齐

一个父级元素div,宽度为1000px,父级元素里有很多a标签,或者是div,如何让其子元素对齐?

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

用inline-block方式:

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

效果如下:

浅谈inline-block的多从使用方法  上图是切换的按钮,就是用inline-block对齐的。

HTML代码:

<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>

css代码:

.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,而是其他方法,实现起来就相对很麻烦了,即使实现了效果也是不尽如人意的,且存在很多缺点,对后期些许会存在不大不小的影像。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 浅谈inline-block的多种使用方法

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发