Tips_利用padding实现高度可控的分隔线
一.实现分隔线的方法(未理解:不是说span元素垂直方向设置怕padding不影响吗?)
html:
<div>
登陆<span></span>注册
</div>
css:
.span{
padding: 12px 6px 1px;/*这里通过改变第一个参数和第三个参数可以调节风隔线的的上下高度,分别是padding-top和padding-bottom*/
margin-left:12px;
border-left:2px solid #000;
font-size:;
}
实现原理:打开chrome浏览器开发者工具进行盒子模型的查看。
图1:将span标签的margin-left设置为12px,对应效果如图1。
图2:为使分隔线左右两边空白对称,这里将span的padding-left和padding-right都设置为6px,因为span中没有内容,所以加起来一共是12px,与margin-left相同。
图3:定义span元素的左边框作为分割线。
图4:至此,通过调节padding-top和padding-bottom,来撑大或是减少盒子的整体高度,以此来调节分隔线。
Tips_利用padding实现高度可控的分隔线的更多相关文章
- 内联元素padding与高度可控的分隔线实例页面
html: <a href="">登录</a><a href="">注册</a> css: a + a:befo ...
- 使用padding代替高度实现背景图片高度按比例自适应
本篇文章由:http://xinpure.com/use-padding-instead-of-highly-adaptive-background-image-height-proportionat ...
- CSS实现自适应分隔线的N种方法
分割线是网页中比较常见的一类设计了,比如说知乎的更多回答 这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应 偷偷的看了一下知乎的实现,很显然是用一块白色背景覆盖的,加一点背景就露馅了 心想 ...
- 【转】CSS实现自适应分隔线的N种方法
1.伪元素+transform:translateX(-100%); 主要原理是设置文本居中text-align: center;,然后给定两个伪元素,分别绝对定位,那么此时伪元素也是跟随着水平居中的 ...
- 巧用CSS实现分隔线
下面是几种简单实现分隔线的方法,个人比较喜欢第二种,我也给出了最后第五种比较2的写法,请大家拍砖,或者提供其他好的方法. 单个标签实现分隔线: 点此查看实例展示 .demo_line_01{ padd ...
- CSS巧妙实现分隔线的几种方法
单个标签实现分隔线: 点此查看实例展示 .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: ...
- css巧妙实现分隔线
单个标签实现分隔线 .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px sol ...
- 文字在线中间,CSS巧妙实现分隔线的几种方法
单个标签实现分隔线: .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px so ...
- 给自定义cell设置分隔线的不同做法
1.给cell添加一个UIView,设置UIView的高度为1,并设置这个UIView的左.下.右约束. 2.不需要给cell添加任何控件,重写cell的- (void)setFrame:(CGRec ...
随机推荐
- 2017-12-19python全栈9期第四天第二节之列表的增删查改之正向排序和倒向排序和反转
#!/user/bin/python# -*- coding:utf-8 -*-li = [3,5,6546,6,8,324,2,1,34,5,6,7]# li.sort() #正向# print(l ...
- JGUI源码:鼠标中键滚动再次优化(5)
//电脑端中键滚动事件 var mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : ...
- SQL Server 数据库编程技巧
Ø 简介 本文主要介绍 SQL Server 数据库在平常的开发中,可能会涉及到的编程技巧,主要包含以下内容: 1. 解决 SQL Server 不支持 127.0.0.1 登录 2. 查询 ...
- I. Max answer(RMQ预处理前缀和)
题目链接: https://nanti.jisuanke.com/t/38228 题目大意:给你n个数,让你找出一个区间中f的最大值,具体的f计算方法,这段区间的和乘以这段区间的最小值. 具体思路:我 ...
- Django之form表单
https://www.cnblogs.com/liwenzhou/p/8747872.html 1. form组件的介绍 之前web开发的模式,以注册为例: 1. 要有一个注册的页面,页面里面要有f ...
- NB卡开卡注意事项【转】
转自:https://blog.csdn.net/cheng401733277/article/details/83276436 版权声明:本文为博主原创文章,未经博主允许不得转载. https:// ...
- Lua 中 pairs 和 ipairs 的区别
ipairs (t) Returns three values: an iterator function, the table t, and 0, so that the construction ...
- 【easy】100. Same Tree
判断两棵二叉树是否相等 /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left ...
- VMware虚拟机安装Linux系统后IP配置(二)
1.在NAT模式下自动获取IP 2.编辑网卡配置文件(通用) 3.Ctrl+L 清屏.重启网络服务后检查网络是否正常上网 修改后本机IP地址在linux中ping通本机IP 然而在本机却ping不通l ...
- 字符串(2)KMP算法
给你两个字符串a(len[a]=n),b(len[b]=m),问b是否是a的子串,并且统计b在a中的出现次数,如果我们枚举a从什么位置与匹配,并且验证是否匹配,那么时间复杂度O(nm), 而n和m的范 ...