用一条线连接的css3响应圈？答案

【问题标题】：Css3 responsive circles connected by a line?用一条线连接的css3响应圈？
【发布时间】：2015-06-05 23:12:57
【问题描述】：

您好，我正在尝试使用 css3 创建一个带有响应式圆圈的 div。

我想做什么的例子http://codepen.io/bookcasey/pen/cEntL

在上面的示例中，我想让它具有响应性，这样圆的大小不会改变，但如果宽度增加，我希望第一个和最后一个圆位于 UL 的左侧和右侧，而其他圆位于等距离之间.圆圈可以增加或减少最少是两个圆圈和一条线。

【问题讨论】：

圈数总是一样吗？
no 最少两个圈和一条直线，每圈在直线的两端，最多5圈

标签： javascript jquery html css

【解决方案1】：

您可以使用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;
}

【讨论】：

非常感谢@Oriol，在上面的例子中，你能帮我做一件小事吗，一小部分线从第一个圆圈和最后一个圆圈出来，我们也可以把它放在里面吗它看起来像线在圆圈之后开始并在最后一个圆圈之前结束。
@thechoosenone 一点也不 :) 只需删除 li { margin: 0 1em; }。 Demo.
试过了，但是在最后一个圆圈之后，右边出现了一部分线。
我在 Mac 上使用 Safari。
@thechoosenone 您可以通过注释<li> 元素之间的空格来修复它，或者使用font-size: 0 到<ul> 并将其重置为<li>s。 Demo

【解决方案2】：

如果您想在每个数字下方添加一段文字，我也这样做了！ Check it out on CodePen

HTML

<ul>
  <li><span class="marker-number">1</span> <span class="marker-text">Select Car</span></li>
  <li class="active"><span class="marker-number">2</span> <span class="marker-text">Questions</span></li>
  <li><span class="marker-number">3</span> <span class="marker-text">Problems</span></li>
  <li><span class="marker-number">4</span> <span class="marker-text">Inspection</span></li>
  <li><span class="marker-number">5</span> <span class="marker-text">Solution</span></li>
</ul>

CSS

ul {
  text-align: justify;
  position: relative;
  overflow: hidden;
}
ul:before, .active:after {
  content: '';
  width: 100%;
  border: 2px solid #21a2d1;
  position: absolute;
  top: 1em;
  margin-top: -6px;
  z-index: -1;
}
.active:after {
  border-color: #b7b7b7;
}
ul:after {
  content: "";
  display: inline-block;
  width: 100%;
}
li {
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  line-height: 1.7em;
  border-radius: 50%;
  background: #21a2d1;
  margin: 0 1em;
  display: inline-block;
  color: white;
  font-size: 1em;
}

.marker-number {
  font-size: 14px;
}

li.active {
  background: #04497b;
}

.active ~ li {
  background: #b7b7b7;
}

span.marker-text {
  color: #7d7d7d;
  font-size: 12px;
  line-height: 16px;
  width: 70px;
  display: block;
  margin-left: -21px;
  margin-top: 2px;
  font-style: italic;
  font-family: Arial;
}

【讨论】：

我想要垂直格式的相同内容。第一列可以是名称，第二列应该是步进器。请告诉我需要添加/更改的内容。谢谢。

【解决方案3】：

我通过使用浮点数来解决，在元素之前作为圆，之后作为连接：

SOLUTION

li {
  width: 14%;
  text-align: center;
  line-height: 2em;
  float: left;
  color: white;
  position: relative;
}

li:before{
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - 1em);
  width: 2em;
  height: 2em;
  border-radius: 1em;
  background: dodgerblue;
  z-index: -1;
}

li:after{
  content: '';
  position: absolute;
  top: .9em;
  left: calc(50% + 1em);
  width: 100%;
  height: .2em;
  background: dodgerblue;
  z-index: -1;
}

【讨论】：