圆和线的Css解决方案

Question

我正在寻找一个响应下面图像的css解决方案。

我有以下html和css，但它不具有反应性，我需要将该线放在圆圈旁边。

<div class="col-xs-6 col-sm-2">
    <div class="circle"> </div>
    <div class="line"><img src="assets/line.png" class="black-line"></div>
</div>

.circle {
background-color:#fff;
border:2px solid #222;    
height:50px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
width:50px;
float: left;
 line-height: 50px;}

.line { line-height: 50px; text-align: center; float: left; padding: 0 8px;}

Answer 1

这是一个有效的响应版本：

＆＃13;

＆＃13;

.container {
  border-bottom: 3px solid #111;
  height: 1rem;
  display: flex;
  justify-content: space-between;
}

.circle {
  display: inline-block;
  background: #fff;
  width: 2rem;
  height: 2rem;
  border: 2px solid #111;
  border-radius: 2.5rem;
  box-shadow: 0 0 0 0.5rem #fff;
}

@media (min-width: 768px) {
  .container {
    height: 2.5rem;
  }
  .circle {
    width: 5rem;
    height: 5rem;
  }
}

＆＃13;

<div class="container">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

这可能不符合您的需求，但提供的信息很难说。但是，它应该提供一个坚实的起点。

Answer 2

这是我尝试使用flexbox的响应式方法。交叉线已使用伪元素完成（无需使用标记进行样式设计）

使用box-shadow属性

完成了圆与线之间的差距

<div class="circlesbox">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

<强> CSS

.circlesbox {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.circlesbox:before {
  content: "";
  position: absolute;
  zindex: 1;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  width: 100%;
  background: #000;
}

.circle {
   position: relative;
   z-index: 2;
   border: 2px solid #222;   
   background: #fff;
   box-shadow: 0 0 0 20px #fff;
   width:50px;
   height:50px;
   border-radius:50%;
}

最终结果