圆和线的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

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

.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;
  }
}

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

其中的元素可能不适合您的需求，尽管根据所提供的信息很难说清楚。但是，它应该提供一个坚实的起点。