我正在尝试创建一个响应时间线,其行为如下( 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;
}
问题
问题是如何创建连接每个圆的线。
线条随着时间线的垂直版本变得垂直。
我该怎么做?
最佳答案
解决方案(仅限 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中进行测试!
关于html - 带连接线的响应式 CSS 时间线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49677318/