Question

我正在尝试在纯CSS中制作时间轴，但我似乎遇到了一些问题。

当我尝试将时间轴div设置为overflow-x时：滚动它仍会在y访问时滚动。

这就是我所拥有的：

        <ol id="timeline">
            <li class="event founded"></li>
            <li class="event grant"></li>
        </ol>


        #timeline {
          height: 500px;
          width: auto;
          margin: 0;
          background: red;
       }

       .event {
          height: 500px;
        }

      .founded {
         width: 400px;
         float: left;
         background: blue;
       }

       .grant {
          width: 800px;
          background: yellow;
       }

我只希望每个附加条目都遵循前一个条目，并且所有条目都可以水平滚动。如果有人能指出我正确的方向，这将是惊人的。

感谢。

Answer 1

我确实必须制作其中一个。这就是我想出的：

http://jsfiddle.net/kthornbloom/zJ6kp/

Answer 2

您也可以参考以下链接

@import url(https://fonts.googleapis.com/css?family=Dosis:500);

body{
  background: #F1F1F1;
}

.container{
  width: 1200px;
  margin: auto;
}

.timeline{
  counter-reset: year 2016;
  position: relative;
}

.timeline li{
  list-style: none;
  float: left;
  width: 33.3333%;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Dosis', sans-serif;
}

ul:nth-child(1){
  color: #4caf50;
}

.timeline li:before{
  counter-increment: year;
  content: counter(year);
  width: 50px;
  height: 50px;
  border: 3px solid #4caf50;
  border-radius: 50%;
  display: block;
  text-align: center;
  line-height: 50px;
  margin: 0 auto 10px auto;
  background: #F1F1F1;
  color: #000;
  transition: all ease-in-out .3s;
  cursor: pointer;
}

.timeline li:after{
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: grey;
  top: 25px;
  left: -50%;
  z-index: -999;
  transition: all ease-in-out .3s;
}

.timeline li:first-child:after{
  content: none;
}
.timeline li.active{
  color: #555555;
}
.timeline li.active:before{
  background: #4caf50;
  color: #F1F1F1;
}

.timeline li.active + li:after{
  background: #4caf50;
}

<h1><a href="http://developerstips.com/">DevelopersTips</a></h1>

<div class="container">
  <ul class="timeline">
    <li class="active">Bacon</li>
    <li>Rib</li>
    <li>Sausage</li>

  </ul>
</div>

纯css中的水平时间轴

2 个答案: