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

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

＆＃13;

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

＆＃13;

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

＆＃13;

修改

您的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

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果您最后以一行作为最后一个元素，请执行以下操作：

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

如何使用CSS

3 个答案: