嗨,我正在尝试创建一个使用css3通过线连接响应圆的div。
我试图做http://codepen.io/bookcasey/pen/cEntL的示例
在上面的示例中,我想使其响应,以使圆的大小不变,但是如果宽度增加,则我希望第一个和最后一个圆位于UL的左侧和右侧,而其他圆则位于等距离之间。圆圈最多可以增加或减少两个圆圈和一条线。
最佳答案
您可以使用Justify the last line of a div?的解决方案来使其全宽。
并使用绝对定位的伪元素伪造该行。
Demo
ul {
text-align: justify;
position: relative;
overflow: hidden;
}
ul:before, .active:after {
content: '';
width: 100%;
border: 2px solid dodgerblue;
position: absolute;
top: 1em;
margin-top: -2px;
z-index: -1;
}
.active:after {
border-color: lightblue;
}
ul:after {
content: "";
display: inline-block;
width: 100%;
}
li {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 50%;
background: dodgerblue;
margin: 0 1em;
display: inline-block;
color: white;
}
.active ~ li {
background: lightblue;
}
body {
font-family: sans-serif;
padding: 2em;
}