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

猜你喜欢
联络方式:
深圳 · 龙岗 · 大运软件小镇22栋302-308
电话:400 1828 580
邮箱:szhulian@qq.com



-
网页设计的立体构成
什麼东西都离不开根底,建房子需求地基,解方程式需求先学会乘法表,唱歌需求先会"哆、来、咪"。页面设计也异样需求根底,这个根底就是立体构成
-
网站如何进行图片搜索优化
网站是由文字+图片组成,有些站还可能会带有一些视频,在做网站优化的时候,首先原创的内容是必不可少的,可是附带的图片也是可以进行搜索优化的,有些同学可能会忽略掉这块
-
jQuery,$(document).ready() 与window.onload有什么区别?
jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的......
-
网站建设对中小企业有什么好处和作用?
随着互联网不断的高速发展,越来越多的企业跟随潮流,选择了建设自己的网站。那么,你知道企业网站建设有什么好处吗?对于这个问题,让深正互联告诉你吧!
-
程序员工作常用的Git命令?
我每天使用 Git ,但是很多命令记不住。一般来说,日常使用只要记住下图6个命令,就可以了。但是熟练使用,恐怕要记住60~100个命令。下面是我整理的常用 Git 命令清单。几个专用名词的译名如下...