Question

我正在尝试创建一个行为为（https://codepen.io/anon/pen/KoGdqG）的响应时间轴：

宽度大于600px是水平的。每个部分的宽度都是响应的;
对于低于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）是通过根据视口宽度向列表元素添加边框并重新定位圆来连接每个圆：

/* 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
}

注意：仅在this page！

中进行测试

Answer 2

另一种使这项工作的方法是使用伪类。在ul：

之前添加一个div

<div class="line"></div>
<ul>...</ul>

https://codepen.io/anon/pen/jzeqEM

添加这些类：

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

  .line{
    width: 45%;
    margin: 0px auto;
    height: 3px;
    background: black;
    display: block;
    position: relative;
    z-index: 1;
    top: 33px;
   }  
}

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

  li span::after{
    content: "";
    width: 3px;
    margin: 0px auto;
    height: 140px;
    background: black;
    display: block;
    position: relative;
    z-index: 1;
    top: 20px;
  }

  li:nth-child(4) span::after{
    content: "";   
    background: none;
  }

}

Answer 3

您可以尝试在每个.line内添加新元素li。 .line的位置根据宽度（百分比）和边距（像素）计算：

@media screen and (min-width: 600px) {  
  .line {
    width: 100%;
    height: 0;
    border-top: solid 1px black;
    position: relative;
    display: block;
    transform: translateX(calc(50% + 20px)) translateY(-18px);
  } 

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

  li span {
    margin: 0 auto;
  }  

} 

@media screen and (max-width: 599px) {  
  .line {
    width: 0;
    height: 100%;
    border-left: solid 1px black;
    position: relative;
    display: table-cell;
    transform: translateX(-11px) translateY(calc(50% - 5px));
  } 

  li {
    display: table;
  }

  ul {
    text-align: left;
  }

  li h3 {
    margin-left: 40px;
  }

  li p {
    margin-left: 40px;
  }  

}

li { display: table }和`.line {display：table-cell}是一种解决方法，可以让内部元素知道父元素的高度。高度是根据文本内容动态计算的，因此我们必须使用此或flexbox。

这是一个工作片段：

＆＃13;

* {
	-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) {  
  .line {
  width: 100%;
  height: 0;
  border-top: solid 1px black;
  position: relative;
  display: block;
  transform: translateX(calc(50% + 20px)) translateY(-18px);
} 
  li {
    display: inline-block;
    width: 25%;
  }
  
  li span {
    margin: 0 auto;
  }  
  
} 

@media screen and (max-width: 599px) {  
  li {
    display: table;
  }
  .line {
    width: 0;
    height: 100%;
    border-left: solid 1px black;
    position: relative;
    display: table-cell;
    transform: translateX(-11px) translateY(calc(50% - 5px));
  } 
  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;
}

＆＃13;

<ul>
  <li>
    <span class="mark"></span>
    <div class="line"></div>
    <h3>Step 1</h3>
    <p>Some text that describes text 1</p>
  </li><li>
    <span class="mark"></span>
    <div class="line"></div>
    <h3>Step 2</h3>
    <p>Some text that describes text 2</p>
  </li><li>
    <span class="mark"></span>
    <div class="line"></div>
    <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>

＆＃13;

响应式CSS时间轴与连接线

3 个答案: