elementUI 时间线居左显示
elementUI 时间线居左显示
一、vue + elementUI
实现时间线 Timellne 中时间戳居左显示
二、效果图

三、实现方法
关键代码:
<el-timeline>
<el-timeline-item
v-for="(item, index) in activities"
:key="index"
type="primary"
color='#409EFF'
:timestamp="item.timestamp"
placement="top"
>
<div class="year">{{item.year}}</div>
<div class="item">
<div style="margin-bottom: 5px;">
<span>{{item.address}}</span>
<span>{{item.depart}}</span>
</div>
<div>
<span>{{item.post}}</span>
<span>{{item.level}}</span>
</div>
</div>
</el-timeline-item>
</el-timeline>
关键样式:
.year {
color: #409EFF;
position: absolute;
left: -60px;
top: 1px;
}
.item {
color: #ffffff;
border-left: 2px solid #fff;
margin-left: 25px;
font-size: 15px;
span {
padding-left: 10px;
}
完整代码及示例
~~ 完美解决问题
elementUI 时间线居左显示的更多相关文章
- 使Gallery时设置居左显示
Gallery中的图片默认是居中显示的.可是在非常多情况下我们须要它居左显示,这样做有一个简单方法.就是把Gallery的left设置为负多少,如以下的方法: Drawable drawable=ca ...
- UICollectionViewCell「居左显示」
UICollectionViewCell「居左显示」 准备: 1.UICollectionView Left Aligned Layout 一款UICollectionView居左显示的约束点击下载_ ...
- UIButton文字居左显示
题外话:时间依然过的非常快.不知不觉2015年就过去一半了.感觉自己好像没有大的改变.仅仅能感叹时间飞逝,却不能有所收获. 我从来都不是一个安于现状的人,改变自己的想法从未停止过.我想大多数人都跟我有 ...
- DevExpress相关控件中非字符数值居左显示
用了这么长时间的DevExpress控件,今天遇到俩问题. 一个是从头到尾看了一遍编译成功的例子,只能感慨,功能太丰富了,自己所用的不过是冰山一角.有些自己一直想实现的效果,原来早就有现成的可用,汗颜 ...
- 如何解决Angular网页内嵌推特时间线无法正常显示
我最近解决了一个折磨了我好久但是解决方法却只是添加两三行代码的问题.我没有在网上找到合适的解决方案,最后是我根据官方网站和很多的帖子里的部分代码得到的启发,尝试了很久之后得到的解决方法.因为过程实在是 ...
- electron-vue在使用element-ui时部分组件无法显示问题
原文连接: https://juejin.im/post/5d132629e51d45772a49ad71 问题描述 在使用electron开发桌面系统时,遇到部分element-ui组件在页面中无法 ...
- 谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- 谈谈一些有趣的CSS题目-- 单行居中,两行居左,超过两行省略
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- css实现一行居中显示,两行靠左显示,超过两行以引号省略
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css设置图片居中、居左、居右
CreateTime--2017年12月8日14:25:09 Author:Marydon css设置图片居中.居左.居右 图片一般默认是居左显示的,如何更改它的水平位置呢? <div st ...
随机推荐
- Spring AOP里面的通知Advice类型
@Before前置通知 在执行目标方法之前运行 @After后置通知 在目标方法运行结束之后 @AfterReturning返回通知 在目标方法正常返回值后运行 @AfterThrowing异常通知 ...
- C++中的引用(Reference)
1. 引用(Reference) 在 C++ 中,引用(Reference)是一个变量的别名. 它允许你通过不同的名字访问同一个变量. 与指针不同,引用在定义时必须被初始化,并且一旦绑定到某个变量,之 ...
- 屏幕分辨率基础概念PX,PT,DP,DPR,DPI说明
屏幕分辨率基础概念说明 缩写 全称 说明 PX Device Pixels 设备像素,指设备的物理像素 PX CSS Pixels CSS像素,指CSS样式代码中使用的逻辑像素 DOT Dot 点,屏 ...
- 操作系统|SPOOLing(假脱机)技术
什么是假脱机技术,它可以解决什么问题? 什么是脱机技术 要回答什么是假脱机技术,首先我们需要知道什么是脱机技术.<计算机操作系统(第四版)>写道: 为了解决人机矛盾及CPU和I/O设备之间 ...
- oeasy教您玩转vim - 40 - # 复制粘贴
复制粘贴 回忆上节课内容 我们上次的内容是粘贴 小写p意味着在光标下面或者后面粘贴 大写P意味着在光标上面或者前面粘贴 p的意思是放上去,就是put 把什么放上去呢? 把 reg 中 " ...
- [oeasy]python0011 - python虚拟机的本质_cpu架构_二进制字节码_汇编语言
程序本质 回忆上次内容 我们把python源文件 词法分析 得到 词流(token stream) 语法分析 得到 抽象语法树(Abstract Syntax Tree) 编译 得到 字节码 (b ...
- Linux 中 Crontab 执行时的环境变量问题(allure命令不执行)
前几天做了UI自动化脚本部署linux服务器,但是放下脚本的allure命令不执行(生成allure报告和启动allure服务的命令不执行),然后就各种找问题,一开始怀疑是allure的环境变量问题, ...
- java面试一日一题:mysql的索引下推了解吗
问题:请问你了解索引下推吗 分析:该问题主要考察对mysql优化方面的理解 回答要点: 主要从以下几点去考虑, 1.mysql中索引的概念? 2.索引下推的理解及意义? 在面试过程中问到mysql,必 ...
- 7、SpringMVC之RESTful概述
创建名为spring_mvc_rest的新module,过程参考5.2节和6.6节 7.1.简介 RESTful 也称为REST(英文:Representational State Transfer) ...
- 【Spring】06 Aop切面功能
什么是Aop? Aspect Oriented Programming 面向切面编程 通过预编译的方式和运行期动态代理实现程序功能统一维护的一种技术 是OOP的延续,也是Spring第二个核心内容 可 ...