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将对象转化为 ...
随机推荐
- Charles安装证书ssl proxying
1.找到工具栏上方的 help 按钮 2.help下面有一个 ssl proxying的选项,点击ssl proxying 选择里面的第三个:install charles root certific ...
- (转)Entity Framework 5.0系列之自动生成Code First代码
原文地址:http://www.cnblogs.com/kenshincui/archive/2013/08/29/3290527.html 在前面的文章中我们提到Entity Framework的“ ...
- Java实现四则运算 谢雅淇 袁杏仪
GitHub链接:https://github.com/3216004716/four-operations.git 项目相关要求 使用 -n 参数控制生成题目的个数,例如 Myapp.exe -n ...
- [.net 多线程]异步编程模式
.NET中的异步编程 - EAP/APM 从.NET 4.5开始,支持的三种异步编程模式: 基于事件的异步编程设计模式 (EAP,Event-based Asynchronous Pattern) 异 ...
- C#中的枚举使用
基本用法 默认从0开始分配各个枚举值对应的数字值 public enum VariableType { Type1, Type2 } 指定各个枚举值对应的数字值 public enum Variabl ...
- .NET&C#的异常处理
应用程序未捕获异常的处理 处理未捕获的异常是每个应用程序起码有的功能 无论是Windows窗体程序还是WPF程序,我们都看到捕获的异常当中分为"窗体线程异常"和"非窗体线 ...
- vs2015+opencv3.3.1 实现 c++ 双边滤波器(Bilateral Filter)
#include <opencv2\highgui\highgui.hpp> #include <iostream> #include<vector> using ...
- iOS11.0后APP的图标和启动图
随着Xcode9的更新,APP的图标和启动图也发生了略微变化,下面介绍下图标和启动图的设置. 1.APP图标: 这些是系统默认你开发的项目支持iPad.Spotlight等,其实真正我们的项目只要支持 ...
- 互斥锁与join
三 互斥锁与join 使用join可以将并发变成串行,互斥锁的原理也是将并发变成穿行,那我们直接使用join就可以了啊,为何还要互斥锁,说到这里我赶紧试了一下 #把文件db.txt的内容重置为:{&q ...
- luoguP2387 [NOI2014]魔法森林
https://www.luogu.org/problemnew/show/P2387 考虑先将所有边按 a 值排序,依次加入每一条边,如果这条边的两个端点 ( l, r ) 之间的简单路径中 b 的 ...