如何使用CSS将水平线放在圆形子弹旁边

Question

我正在尝试使用CSS完成以下操作：

理想情况下，线条的长度应取决于圆圈的数量（如果它小于5则应该更长，如果超过则更短，依此类推）。

我尝试使用以下代码执行此操作：

HTML：

<div class="ng-modal-number-container">
   <div class="questionNumbers" ng-repeat="item in numberOfQuestions">
        <div class="questionNumberIcon">{{item}}</div><div class="questionNumberLine"></div>
   </div>
</div>

CSS：

.ng-modal-number-container {
    height:78px;
    background-color:#f5f5f5;
    width:auto;
    display:flex;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.questionNumbers {
    display:inline;
}

.questionNumberIcon {
    display:inline-block;
    width:45px;
    height:45px;
    border-radius:23px;
    font-size:18px;
    color:#000;
    line-height:45px;
    text-align:center;
    background:#fff;
    border:2px solid black;
 }

.questionNumberLine {
    border-top:1px solid black;
    display:inline-block;
}

但是，我得到的是这样的：

我确定我的CSS有问题，我只是不知道是什么。 希望你们能为我指出它。

一如既往，非常感谢任何建议。

谢谢。

更新1：建议z0mB13，我将ng-modal-number-container的对齐内容更改为以下内容：

.ng-modal-number-container {
    height:78px;
    background-color:#f5f5f5;
    width:auto;
    display:flex;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}

我还添加了width:100px到.questionNumberLine ，所以这就是现在的样子：

只需要进行一些调整，我就可以调整线条的位置，但是，是否可以使线条的宽度动态变化？ 如果圈子较少，我希望它更长，反之亦然。

谢谢！

更新2（答案）：最后通过thepio的提示解决了这个问题。 我在这里发布我的解决方案，以防其他人在将来遇到同样的问题。

谢谢你！

HTML：

<div class="question-content-wrapper">
    <div class="ng-modal-number-container">
        <div class="questionNumbers" ng-repeat="item in numberOfQuestions">
            <div class="questionNumberIcon">{{item}}</div>
        </div>
    </div>
</div>

CSS：

.ng-modal-number-container {    
    margin-top: 22px;
    background-color:#f5f5f5;
    border-top: 1px solid black;
    width:auto;
    display:flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}

.questionNumbers {
    margin-top:-23px;
}

.questionNumberIcon {
    width:45px;
    height:45px;
    border-radius:50%;
    font-size:18px;
    color:#000;
    line-height:42px;
    text-align:center;
    background:#fff;
    border:1px solid black;
}

.question-content-wrapper {
    position:relative;
    background-color:#f5f5f5;
    height:78px;    
    padding-left:20px;
    padding-right:20px;
    padding-top:16px;
}

它现在看起来像什么：

Answer 1

这里有一个例子说明了如何实现你想要的东西。 很抱歉没有在您的代码中实现它，但您应该可以轻松地自己完成。

 body { margin: 50px 20px; } .container { width: 100%; display: flex; justify-content: space-between; border-top: 2px solid black; padding-top: 15px; margin-top: 15px; } .container div { background-color: #ffffff; font-weight: bold; border: 2px solid black; margin-top: -40px; width: 45px; height: 45px; line-height: 45px; text-align: center; border-radius: 50%; } 

 <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> 

编辑：

你的html结构的小提琴： https ： //jsfiddle.net/thepio/0opv207p/

Answer 2

//这些圆圈和线条在任何分辨率下自动调整//

 .main-container{ width:100%; height:200px; border:1px solid; padding-top:20px; padding-left:10px; } .circle{ position:relative; display:inline-block; width:10%; height:50px; border:1px solid #333; border-radius:50%; text-align:center; line-height:45px; float:left; } .line{ width:15%; border:1px solid red; float:left; margin-top:25px; } 

 <div class="main-container"> <div class="circle">1</div> <div class="line"></div> <div class="circle">2</div> <div class="line"></div> <div class="circle">3</div> <div class="line"></div> <div class="circle">4</div> </div> 

Answer 3

这将占多个子弹数量和任何宽度。

 .questionNumbers { display: flex; align-items: center; } .questionNumberIcon { display: flex; height: 40px; width: 40px; border-radius: 50%; border: 1px solid black; align-items: center; justify-content: center; } .questionNumberLine { flex: 1 0 auto; height: 0; border-top: 1px solid black; } 

 <main class="questionNumbers"> <div class="questionNumberIcon"> 1 </div> <div class="questionNumberLine"></div> <div class="questionNumberIcon"> 2 </div> <div class="questionNumberLine"></div> <div class="questionNumberIcon"> 3 </div> <div class="questionNumberLine"></div> <div class="questionNumberIcon"> 4 </div> </main> 

如果您最后将一行作为最后一个元素，那么就这样做：

.questionNumberLine:last-of-type {
  display: none;
}