我试图完成下面使用CSS坐圈子弹旁边:如何使水平线使用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-模数集装箱的证明内容如下:
.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
,所以这是它的样子现在:
短短几年更多的调整,我可以调整线的位置,但是,是有可能使线路DYNA的宽度麦克风?如果圈数较少,我希望它长一些,反之亦然。
谢谢!
UPDATE 2(Answer):终于解决了这个,这要感谢pio的提示。我在这里发布我的解决方案,以防其他人在未来遇到同样的问题。
谢谢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;
}
什么它看起来像现在:
的圆圈之间的间距给“证明内容:空间围绕”为NG-模数容器 – z0mBi3