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将对象转化为 ...
随机推荐
- 如何偷Android的内存-Tricking Android MemoryFile
之前在做一个内存优化的时候,使用到了MemoryFile,由此发现了MemoryFile的一些特性以及一个非常trickly的使用方法,因此在这里记录一下 What is it MemoryFile是 ...
- Asp.net WebPages框架运行原理浅析
[来源] 达内 [编辑] 达内 [时间]2012-09-14 在Asp.net4和4.5中,新增了WebPages Framework,编写页面代码使用了新的Razor语法,代码更加的简洁和 ...
- javascript总结10:JavaScript的Switch语句
1 switch语句 的作用: switch 语句用于基于不同的条件来执行不同的动作. 每当满足一个变量条件,就会执行当前的case内容. break 关键字用于跳出switch代码块.会终止swit ...
- web大文件上传控件-设置附加参数-Xproer.HttpUploader6
自定义附加字段在up6.js中定义,也可以不用定义: 注意: 1.附加字段必须是字符串类型. 2.如果附加字段的值包含中文,在上传前必须使用encodeURIComponent进行编码. 在引 ...
- wpf控件开发基础
wpf控件开发基础(3) -属性系统(2) http://www.cnblogs.com/Clingingboy/archive/2010/02/01/1661370.html 这个有必要看看 wpf ...
- IIS 6.0 发布网站使用教程
原文地址:http://wenku.baidu.com/view/95d8b49851e79b89680226aa.html
- windows phone制作引导页
适用于WP7 WP8+ 源码下载撸这里 制作动画gif小软件下载 小技巧 ①图片是纯色背景:将页面设置跟图片背景一样颜色 ②图片是渐变or其他,切图时候:单独切背景(页面设置这个为背景)跟图片里面元素 ...
- WPF程序开机速度策略
WPF程序开机速度慢是一个很讨厌的问题.具体分析后,可能有以下问题 1.在主线程中加载图像导致 2.初始化各种UserControl导致 3.加载类库导致
- Android系列一: 环境搭建
相关软件 JAVA JDKAndroid StudioHAXM JDK的安装和Java环境变量的设置 1.JDK下载地址: http://www.oracle.com/technetwork/j ...
- 严选 Android 路由框架优化(下篇)
3 router 框架优化 3.1 apt 生成代码量过大问题优化 思考框架本身,其实可以发现仅有 router 映射表是需要根据注解编译生成的,其他的全部代码都是固定代码,完全可以 sdk 中直接编 ...