Question

我正在尝试在引导页面中间创建一个垂直时间轴，其中圆圈表示沿着它的每个日期。

我到目前为止的css是：

    .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）上面。左侧的线条略向左侧，右侧的圆圈线条。用右/左移动它们只是将它们推到页面的末尾。

任何想法？

整页的小提琴：https://jsfiddle.net/vtb4t17h/

Answer 1

你的意思是这样的：https://jsfiddle.net/vtb4t17h/1/

基本上更改.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;

我补充说：

left:50%

我做了什么

我偏移margin-left:-20px（这使得li正好居中），事情是它们是40px宽，所以它们需要被带回来20px所以得到那个元素的中心，所以{{1}}那样做

CSS垂直时间轴

1 个答案: