如何使用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;
}