display inline-block 间隔
1.如果li横排用display:inline-block; 则li之间不能有间隔 必须连着一起,所以才一般用float:left;
.today-wrap{
position: relative;
background: $white;
height: 220px;
padding-top: 40px;
padding-bottom:40px;
li{
float: left;
width: 50%;
&:last-child{
&:before{
content: '';
position: absolute;
left:50%;
width: 1px;
height: 80%;
top:20px;
background:$grey;
}
}
}
.today-recommend{
text-align: center;
color: $blue;
.recommend-num{
font-size: 56px;
}
.recommend-unit{
font-size: 24px;
}
.recommend-name{
font-size: 26px;
color:$grey;
}
}
}
<div class="today-wrap">
<ul>
<li class="today-recommend">
<a href="#">
<div>
<span class="recommend-num">32</span>
<span class="recommend-unit">笔</span>
</div>
<div class="recommend-name">
今日推广订单
</div>
</a>
</li>
<li class="today-recommend">
<a href="#">
<div>
<span class="recommend-num">260.00</span>
<span class="recommend-unit">元</span>
</div>
<div class="recommend-name">
今日获得收益
</div>
</a>
</li>
</ul> </div>
display inline-block 间隔的更多相关文章
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline; display:block;
block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...
- display:block、display:inline与displayinline:block的概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:inline 和display:inline-block和display:block的区别
之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...
- 理解display:inline、block、inline-block
要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...
- display:inline 跟 display:block 跟 display:inline-block区别
我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...
- HTML5 display:inline、block、inline-block的区别--备用
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别(转)
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline,display:inline-block,display:block 区别
之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...
随机推荐
- Monkey测试异常信息解读
查看包名 1.cmd 下面输入 adb locat > D:\test.txt 2.ctrl+c 停掉刚刚 1 运行的进程 3.打开test.txt文件--搜索 Displayed 对应的内 ...
- Join导致冗余数据引起慢SQL
业务过程中碰到多个join引起慢SQL问题,数据量不大,但查询很慢,搜到一片BLog,参考解决. 业务过程不记录,以blog内容重现: 原SQL: select distinct abc.pro_co ...
- 开源IMS平台中间件Mobicents
下面内容来自百度百科 Mobicents 是一个高伸缩性.事件驱动的应用服务器.是一款专业的.开放源代码的 VoIP 中间件平台.Mobicents是首个采用JAIN SLEE标准的开放式源代码电信应 ...
- 在Eclipse中连接SQL
原创 在Eclipse中连接SQL分为如下几个步骤: 1.加载驱动程序 2.创建连接对象 3.创建执行SQL语句的对象 4.执行SQL语句 5.关闭new出来的对象 1.加载驱动程序(以SQL为例) ...
- web开发四个作用域
web开发一共有四个作用域,范围从高到低分为appliaction作用域(全局作用域),session作用域,request作用域和page作用域.${base}是el表达式语法,它会自动先从page ...
- 软件工程实践一 —— java之wc.exe
SoftwareEngineering-wc github项目地址:https://github.com/CuiLam/SoftwareEngineering-wc 项目相关要求 实现一个统计程序 ...
- 2014-4-2解决无法访问github和google的问题
github是个好地方,但是上不去就蛋疼了. 今天github上不去,果断f12下,看下network,发现里面好多请求都是指向 github.global.ssl.fastly.net这个域名的,然 ...
- 七月小说网 Python + GraphQL (三)
概述 后台数据库几个基本表基本搭建完毕,看了下Github Develop的V4 Api抛弃了RESTful,采用GraphQL,感觉很有意思,一看文档,竟然有Python的开源实现 Graphene ...
- C#委托同步异步说明,并比较control调用Invoke和BeginInvoke的异同
一.委托的同步和异步: 1.同步 使用Invoke调用同步,或直接写fun1("func"),在fun1.Invoke这一步会明显的阻塞线程 使用: static void Mai ...
- [python]模块及包
一 .module 通常模块为一个文件,直接使用import来导入就好了.可以作为module的文件类型有".py".".pyo".".pyc&quo ...