Html CSS垂直时间线
我试图在引导页面的中间创建一个垂直的时间线,其中的圆圈代表每个日期 到目前为止,我的css是:Html CSS垂直时间线,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我试图在引导页面的中间创建一个垂直的时间线,其中的圆圈代表每个日期 到目前为止,我的css是: .middleline { list-style: none; position: relative; padding: 20px 0px 20px; } .middleline:before{ top: 0; bottom: 0; position: absolute; con
.middleline {
list-style: none;
position: relative;
padding: 20px 0px 20px;
}
.middleline:before{
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #608dc5;
left: 50%;
margin-left: -1.5px;
}
.middleline li{
position: absolute;
width: 40px;
height: 40px;
background-color: #4f80bf;
border-radius: 50px;
}
我已经摆弄这个好几个小时了,但不能让它和时间线圆圈(li)在一起。带的线略向左,圆圈略向右。用右/左移动它们只会将它们推到页面的末尾
有什么想法吗
整页的小提琴:你的意思是这样的:
基本上改变了。中间线li
看起来像这样:
.middleline li {
position: absolute;
width: 40px;
height: 40px;
background-color: #4f80bf;
border-radius: 50px;
left: 50%;
margin-left: -20px;
list-style: none;
}
我补充说:
left: 50%;
margin-left: -20px;
list-style: none;
我所做的
我偏移了
左:50%
(这正好是li的中心),问题是它们的宽度是40px,所以它们需要在20px处被带回来,所以得到该元素的中心,所以左边距:-20px
这是不是你能提供一个实际的标记?(html+css)它是引导的,所以不会以小提琴的形式显示。但是带(圆圈)的垂直时间线正在显示。忽略顶部的水平面。是的,完全一样-谢谢。剩下的利润增加了什么?另外,我该如何让它沿着页面中间的整个长度,每边都有文本?我已经更新了我的答案来解释。。从小提琴上去掉左边的边距,你会看到它偏右了。。“我偏移了<代码>左:50% < /代码>(这使Li正好中心),事情是它们是40px宽的,所以它们需要由20px返回,所以得到那个元素的中心,所以<代码>余量左边:-2px不必担心:如果这帮助了你们,请考虑接受我的答案。