html - 带有连接线的响应式 CSS 时间轴

Question

我正在尝试创建一个响应式时间轴，它的行为类似于 ( https://codepen.io/anon/pen/KoGdqG):

1. 对于大于 600px 的宽度是水平的。每个部分的宽度是响应式的；

2. 对于小于600px的宽度变为垂直；

所以我有以下 HTML:

<ul>
  <li>
    <span class="mark"></span>
    <h3>Step 1</h3>
    <p>Some text that describes text 1</p>
  </li><li>
    <span class="mark"></span>
    <h3>Step 2</h3>
    <p>Some text that describes text 2</p>
  </li><li>
    <span class="mark"></span>
    <h3>Step 3</h3>
    <p>Some text that describes text 3</p>    
  </li><li>
    <span class="mark"></span>
    <h3>Step 4</h3>
    <p>Some text that describes text 4</p>
  </li>      
</ul>

以及以下 CSS:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
} 

body {
  text-align: center;
}

ul {
  max-width: 1000px;  
  padding: 0;
  margin: 0 auto;
  width: 60%;
  list-style: none;
    list-style: none;
    list-style-type: none;  
}

li {
  padding: 20px;
  margin: 0;  
}

@media screen and (min-width: 600px) {  

  li {
    display: inline-block;
    width: 25%;
  }

  li span {
    margin: 0 auto;
  }  

} 

@media screen and (max-width: 599px) {  

  ul {
    text-align: left;
  }

  li h3 {
    margin-left: 40px;
  }

  li p {
    margin-left: 40px;
  }  

} 

li span {
  background-color: white;  
  border: 2px solid green;                
  display: inline-block;
  height: 24px;
  width: 24px;
  border-radius: 12px;   
}

li h3 {
  text-align: left;
}

li p {
  text-align: left;
}

问题

问题是如何创建连接每个圆的线。

随着时间轴的垂直版本，线条变得垂直。

我该怎么做？

Answer 1

一个解决方案(仅限 CSS)是通过根据视口(viewport)宽度向列表元素添加边框并重新定位圆圈来连接每个圆圈:

/* vertical connections */
@media screen and (max-width: 599px) {
  li {
    border-width: 0 0 0 1px !important; /* change visible border to left */
    margin-top: 0 !important; 
  }
  li span.mark {
    left: -12px; /* half circle height */
  }
}

/* for horizontal connections */
li {
  position: relative;
  border-style: solid;
  border-width: 1px 0 0 0; /* show top border */
  margin-top: 15px;
}

li span.mark {
  position: absolute;
  top: -12px; /* half circle height */
}

你的完整 CSS(我稍微重新组织了一下)可能如下所示:

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

body {
  text-align: center
}

li {
  margin: 0;
  padding: 20px
}

ul {
  list-style: none;
  list-style: none;
  list-style-type: none;
  margin: 0 auto;
  max-width: 1000px;
  padding: 0;
  width: 60%
}

@media screen and (min-width: 600px) {
  li {
    display: inline-block;
    width: 25%
  }
  li span {
    margin: 0 auto
  }
}

@media screen and (max-width: 599px) {
  li {
    border-width: 0 0 0 1px !important;
    margin-left: 15px;
    margin-top: 0 !important
  }
  li h3 {
    margin-left: 40px
  }
  li p {
    margin-left: 40px
  }
  li span.mark {
    left: -12px
  }
  ul {
    text-align: left
  }
}

li {
  border-style: solid;
  border-width: 1px 0 0;
  margin-top: 15px;
  position: relative
}

li h3 {
  text-align: left
}

li p {
  text-align: left
}

li span {
  background-color: #fff;
  border: 2px solid green;
  border-radius: 12px;
  display: inline-block;
  height: 24px;
  width: 24px
}

li span.mark {
  position: absolute;
  top: -12px
}

注意:仅在 codepen 中测试过!