如何使用CSS使横线坐在圆形子弹的旁边

I'm trying to accomplish the below using CSS:

我正在尝试使用CSS来完成以下内容:

Ideally, the length of the lines should depend on the number of circles (i.e. it should be longer if it's less than five, shorter if more than, and so on).

理想情况下，线条的长度应该取决于圆圈的数量(例如，小于5的线应该更长，大于5的线应该更短，等等)。

I tried to do this using the following code:

我试着用下面的代码做到这一点:

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

However, what I got was this:

然而，我得到的是:

I'm sure there's something wrong with my CSS, I just don't know what. Hopefully you guys can point it out for me.

我肯定我的CSS有问题，我只是不知道是什么。希望你们能帮我指出来。

Any advice would be very much appreciated, as always.

如有任何建议，我们将一如既往地感激。

Thank you.

谢谢你！

UPDATE 1: As z0mB13 advised, I changed my ng-modal-number-container's justify content to the following:

更新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;
}

I also added width:100px to .questionNumberLine, so this is how it looks like now:

我还增加了宽度:100px到。questionnumberline，这就是现在的样子:

Just a few more tweaks and I can adjust the location of the lines, however, is it possible to make the width of the line dynamic? I want it to be longer if there are fewer circles, and vice versa.

只要再做一些调整，我就可以调整线条的位置，但是，是否有可能使线条的宽度变得动态?我想要它更长，如果有更少的圆，反之亦然。

Thanks!

谢谢!

UPDATE 2 (Answer): Finally solved this thanks to thepio's tips. I'm posting my solution here in case somebody else encounters the same problem in the future.

更新2(答案):感谢thepio的提示，终于解决了这个问题。我在这里发布我的解决方案，以防将来有人遇到同样的问题。

Thanks thepio!

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

What it looks like now:

现在的样子是:

3 个解决方案

#1

Here's a little example of one possibility how you could achieve something like you want. Sorry for not implementing it into your given code but you should be easily able to do it yourself.

这里有一个小例子，你可以实现你想要的东西。很抱歉没有在给定的代码中实现它，但是您应该可以很容易地自己实现它。

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>

EDIT:

编辑:

A fiddle with your html structure: https://jsfiddle.net/thepio/0opv207p/

修改html结构:https://jsfiddle.net/thepio/0opv207p/

#2

// These Set Of Circles And Lines Automatically Adjust At Any Resolution//

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

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

#3

This will account for multiple amount of bullets, and any width.

这将说明子弹的数量，以及任何宽度。

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

If you're ending up with a line as your last element, just do:

如果你的最后一个元素是一行，那就这么做:

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

#1