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 间隔的更多相关文章

  1. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  2. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  3. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  4. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  5. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  6. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  7. display:inline 跟 display:block 跟 display:inline-block区别

    我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...

  8. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  9. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  10. display:inline,display:inline-block,display:block 区别

    之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...

随机推荐

  1. PHP解决跨域访问的问题

    在控制器的第一行放如下代码即可解决 header('Access-Control-Allow-Origin: http://ding.taozugong.com'); header('Access-C ...

  2. Eclipse中连接数据库错误:com.microsoft.sqlserver.jdbc.SQLServerException: 之类的错误

    原创 错误:org.apache.jasper.JasperException: Unable to compile class for JSP 原因是页面指令中 import="java. ...

  3. C++程序的目录结构、编译、打包、分发

    管理C++的第三方库以及编译 第三方库这个说法,不知道出自哪里,但一般是指开发者,系统/平台提供商之外的第三个参与者提供的程序库. 大多数开源软件库在软件系统中都是第三方库. 完全不使用库的开发,在9 ...

  4. MSSQL 静态值查询

    有些时候可能会需要查询一些静态值 ), (),()) AS tabName ( c1 ) 演变1.多列 ,), (,),(,)) AS tabName ( c1,c2 ) 演变2.聚合 ), (),( ...

  5. owinAuthorize

    Nuget包获取 Install-Package Microsoft.AspNet.WebApi.Owin -Version 5.1.2 Install-Package Microsoft.Owin. ...

  6. 13本热门书籍免费送!(Python、SpingBoot、Entity Framework、Ionic、MySQL、深度学习、小程序开发等)

    七月第一周,网易云社区联合清华大学出版社为大家送出13本数据分析以及移动开发的书籍(Python.SpingBoot.Entity Framework.Ionic.MySQL.深度学习.小程序开发等) ...

  7. 「BZOJ 2152」聪聪可可

    题目链接 戳这 \(Solution\) 这道题看起来就像点分治对吧.没错就是点分治. 什么是点分治 如果你不会点分治,可以去看看这儿 现在看到这里,首先确保你已经会了点分治,如果不会你还往下看,听不 ...

  8. 多态的作用-游戏编程展示------新标准c++程序设计

    游戏软件的开发最能体现面向对象设计方法的优势.游戏中的人物.道具.建筑物.场景等都是很直观的对象,游戏运行的过程就是这些对象相互作用的过程.每个对象都有自己的属性和方法,不同对象也可能有共同的属性和方 ...

  9. C语言宏的定义和宏的使用方法(#define)

    1.宏的功能介绍 在 C 语言中,可以采用命令 #define 来定义宏.该命令允许把一个名称指定成任何所需的文本,例如一个常量值或者一条语句.在定义了宏之后,无论宏名称出现在源代码的何处,预处理器都 ...

  10. php代码审计8审计文件上传漏洞

    文件上传漏洞是指用户上传了一个可执行的脚步文件,并通过此脚本文件获得了执行服务器端命令的能力,这种攻击方式是最直接和有效的,文件上传本身是没问题的,有问题的是文件上传后,服务器怎么处理,解释文件,通过 ...