如何使水平线使用CSS
我试图完成下面使用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;
}
什么它看起来像现在:
这里有一个可能性,你如何能做到像一个小例子你要。对不起,没有实现它到你的给定的代码,但你应该很容易能够自己做。
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/
只是为了确认,我会在'.container',正确界定线? –
这取决于情况。但基本上你可以在你想要的“时间轴”的100%(宽度)的包装元素上声明它。所以第一个和最后一个圆从它的边缘开始。 – thepio
好的,谢谢!我会试试这个,并且告诉你它是如何实现的。 :) –
这将占到多重量的子弹,和任何宽度。
.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;
}
//这些设置圆形和线自动调整以任意分辨率//
.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>
除了他们不是圈子 –
的圆圈之间的间距给“证明内容:空间围绕”为NG-模数容器 – z0mBi3