使用html和css在中间显示文本的垂直线

我想这样创作

我能做到下面这样

如何从起点移除多余的线

我无法发布css和html代码，出现了一些错误，因此发布了代码截图

李{
列表样式：无；
宽度：50px；
文本对齐：居中；
}
李：以前{
内容：''；
位置：相对位置；
底部：2px；
显示：块；
宽度：5px；
高度：50px；
背景色：红色；
保证金：0自动；
}

2011年
2012年
2013年
2014年

我在JSFIDLE上为您制作了这个，我希望这就是您想要的

。时间线{
位置：相对位置；
宽度：30px；
保证金：0自动；
溢出：隐藏；
}
.时间线：：之后{
内容：''；
位置：绝对位置；
宽度：4px；
背景色：#ccc；
排名：0；
底部：0；
左：50%；
转化：translateX（-50%）；
}
.字{
宽度：100%；
字体：粗体12px arial，无衬线；
颜色：蓝色；
位置：相对位置；
显示：块；
背景：#fff；
溢出：隐藏；
z指数：999；
明确：两者皆有；
保证金：0自动30px自动；
填充：5px0；
文本对齐：居中；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}

2016
2014
2013
2012
2010

这一问题很容易解决。与其他答案中建议的更经典的块布局相比，使用flex布局将复杂的应用程序分层要容易得多

你可以看看flex和网格布局，这对现代应用的分层有很大帮助

.root {
   display: flex;
   flex-direction: column;
   align-items: center;
   color: blue;
}

.line {
    height: 30px;
    width: 0px;
    border: solid
}    

<div class='root'>
    <div class='line'></div>
    <div class='text'>2016</div>
    <div class='line'></div>
    <div class='text'>2014</div>
    <div class='line'></div>
    <div class='text'>2012</div>
    <div class='line'></div>
    <div class='text'>2010</div>
    <div class='line'></div>
</div>

.root{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
颜色：蓝色；
}
.线路{
高度：30px；
宽度：0px；
边框：实心
}    
2016
2014
2012
2010

---

这是

为什么您不能发布代码？这是我在stackoverflow中的第一个问题，我不知道它抛出了一些错误，说“Leve 4 SpaceWavecome to SO the way”。当包含代码时，需要通过单击{}将其格式化，使其看起来像一个代码块。请这边走，比你好多了

.root {
   display: flex;
   flex-direction: column;
   align-items: center;
   color: blue;
}

.line {
    height: 30px;
    width: 0px;
    border: solid
}    

<div class='root'>
    <div class='line'></div>
    <div class='text'>2016</div>
    <div class='line'></div>
    <div class='text'>2014</div>
    <div class='line'></div>
    <div class='text'>2012</div>
    <div class='line'></div>
    <div class='text'>2010</div>
    <div class='line'></div>
</div>