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将对象转化为 ...
随机推荐
- 编写高质量代码改善C#程序的157个建议——建议3: 区别对待强制转型与as和is
建议3: 区别对待强制转型与as和is 在阐述本建议之前,首先需要明确什么是强制转型,以及强制转型意味着什么.从语法结构上来看,类似下面的代码就是强制转型. secondType = (SecondT ...
- document.domain 跨域问题
document.domain用来得到当前网页的域名. 比如在地址栏里输入:javascript:alert(document.domain); //www.315ta.com我们也可以给docume ...
- 个人项目:wc程序(java)
Github项目地址:https://github.com/jat0824/wc.git 项目相关要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要求写一个命令行 ...
- java代码实现顺序队列
java实现顺序队列 package xianxinTable; import java.util.ArrayList; import java.util.Iterator; import com.s ...
- ComicEnhancerPro 系列教程十八:JPG文件长度与质量
作者:马健邮箱:stronghorse_mj@hotmail.com 主页:http://www.comicer.com/stronghorse/ 发布:2017.07.23 教程十八:JPG文件长度 ...
- strcmp返回值布尔类型的判断
strcmp: 用于比较两个字符串,原型如下: int strcmp ( char const *s1, char const *s2):如果s1小于s2,strcmp函数返回一个小于零的值.如果s1 ...
- Codeforces Round #551 (Div. 2)B. Serval and Toy Bricks
B. Serval and Toy Bricks time limit per test 1 second memory limit per test 256 megabytes input stan ...
- 在虚拟机中连接oracle数据库报错ORA-12154,其他服务器连接无问题
在一台服务器上使用sqlplus登录oracle数据库,cmd->sqlplus->name/passwd@orcl2登录某个数据库用户,提示ORA-12154.使用当前服务器的PLSQL ...
- 安装vm tools(方便虚拟机复制粘贴切换)
在VMware虚拟机中安装好了VMware Tools,才能实现主机与虚拟机之间的文件共享,同时可支持自由拖拽的功能,鼠标也可在虚拟机与主机之前自由移动(而不再用按ctrl+alT释放),而且还可以令 ...
- Python实现——二次多项式回归(最小二乘法)
2019/3/25 真的,当那个图像出现的时候,我真的感觉太美了. 或许是一路上以来自我的摸索加深的我对于这个模型的感受吧. 二次函数拟合--最小二乘法公式法 与线性回归相似,对二次函数进行拟合某种意 ...