将圆形的进度线添加到进度条
我当前正在尝试编写进度条：
.create-progress-bar {
padding: 0 !important;
margin: 25px 0;
display: flex;
}
.create-progress-bar li {
display: flex;
flex-direction: column;
list-style-type: none;
position: relative;
width: 33.3333333333%;
}
.create-progress-bar .step-inner-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.create-progress-bar li span.step-title {
text-transform: uppercase;
font-weight: 600;
}
.create-progress-bar li span.step-icon {
font-size: 22px;
padding: 18px;
border: 3px solid;
border-radius: 100%;
margin-bottom: 6px;
font-weight: 600;
width: 26px;
text-align: center;
}
.create-progress-bar li:first-child {
align-items: flex-start;
}
.create-progress-bar li:nth-child(2) {
align-items: center;
}
.create-progress-bar li:last-child {
align-items: flex-end;
}
.create-progress-bar li::after {
content: '';
position: absolute;
width: 100%;
height: 3px;
background: #666666;
border-radius: 3px;
top: 31px;
left: -50%;
z-index: -1;
}<ul class="create-progress-bar">
<li class="active">
<span class="step-inner-wrapper">
<span class="step-icon">✔</span>
<span class="step-title">Create</span>
</span>
</li>
<li>
<span class="step-inner-wrapper">
<span class="step-icon">✔</span>
<span class="step-title">Check</span>
</span>
</li>
<li>
<span class="step-inner-wrapper">
<span class="step-icon">✔</span>
<span class="step-title">Done</span>
</span>
</li>
</ul>
现在我有一个问题，就是我无法获取每个元素之间样式化的进度条。看起来应该像这样，具体取决于每个active元素中的类li：
有没有人知道如何完成此任务？
2 个答案:
答案 0 :(得分：1)
因此，我彻底更改了CSS，并对HTML结构进行了一些小的更改。这是我的fiddle：
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.progress-bar {
display: flex;
width: 100%;
justify-content: space-around;
flex-flow: row;
align-items: center;
max-width: calc(100% - 40px);
margin: 0 auto;
}
.progress-bar>li:first-child {
width: auto;
}
.progress-bar>li:first-child .line {
display: none;
}
.progress-bar>li.active .tick {
border-color: red;
color: red;
}
.progress-bar>li.active .line {
background: red;
}
.progress-bar>li {
display: flex;
flex-flow: row;
width: 100%;
align-items: center;
}
.tick {
border-radius: 100%;
border: 5px solid black;
height: 30px;
width: 30px;
padding: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 600;
position: relative;
}
.tick>span {
position: absolute;
top: 70px;
}
.line {
width: 100%;
height: 5px;
display: block;
background: black;
margin: 0 15px;
}<ul class="progress-bar">
<li class="active">
<div class="line"></div>
<div class="tick">
✔<span>CREATE</span>
</div>
</li>
<li>
<div class="line"></div>
<div class="tick">
✔<span>CHECK</span>
</div>
</li>
<li>
<div class="line"></div>
<div class="tick">
✔<span>DONE</span>
</div>
</li>
</ul>
您将看到我删除了使用伪类（例如::after）的方法，而是添加了div.line。在CSS中，我使用display: none删除了第一行，而不是删除了div标签，因为它更易于动态使用，因为在添加内容时不必担心删除第一行。但是您也可以像here一样删除它：
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.progress-bar {
display: flex;
width: 100%;
justify-content: space-around;
flex-flow: row;
align-items: center;
max-width: calc(100% - 40px);
margin: 0 auto;
}
.progress-bar>li:first-child {
width: auto;
}
.progress-bar>li.active .tick {
border-color: red;
color: red;
}
.progress-bar>li.active .line {
background: red;
}
.progress-bar>li {
display: flex;
flex-flow: row;
width: 100%;
align-items: center;
}
.tick {
border-radius: 100%;
border: 5px solid black;
height: 30px;
width: 30px;
padding: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 600;
position: relative;
}
.tick>span {
position: absolute;
top: 70px;
}
.line {
width: 100%;
height: 5px;
display: block;
background: black;
margin: 0 15px;
}<ul class="progress-bar">
<li class="active">
<div class="tick">
✔<span>CREATE</span>
</div>
</li>
<li>
<div class="line"></div>
<div class="tick">
✔<span>CHECK</span>
</div>
</li>
<li>
<div class="line"></div>
<div class="tick">
✔<span>DONE</span>
</div>
</li>
</ul>
编辑＃1
根据评论，这是带有软连字符的版本：
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.progress-bar {
display: flex;
width: 100%;
justify-content: space-around;
flex-flow: row;
align-items: center;
max-width: calc(100% - 40px);
margin: 0 auto;
}
.progress-bar>li:first-child {
width: auto;
}
.progress-bar>li.active .tick {
border-color: red;
color: red;
}
.progress-bar>li.active .line {
background: red;
}
.progress-bar>li {
display: flex;
flex-flow: row;
width: 100%;
align-items: center;
}
.tick {
border-radius: 100%;
border: 5px solid black;
height: 30px;
width: 30px;
padding: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 600;
position: relative;
}
.tick>span {
position: absolute;
top: 70px;
max-width: 100px;
text-align: center;
}
.line {
width: 100%;
height: 5px;
display: block;
background: black;
margin: 0 15px;
}<ul class="progress-bar">
<li class="active">
<div class="tick">
✔<span>CREATE­VERY­LONG­TEXT</span>
</div>
</li>
<li>
<div class="line"></div>
<div class="tick">
✔<span>CHECK</span>
</div>
</li>
<li>
<div class="line"></div>
<div class="tick">
✔<span>DONE</span>
</div>
</li>
</ul>hyphens: auto。但这here可以看出，它严重缺乏浏览器支持。
如果您不希望-破折号，请使用word-wrap: break-word;
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.progress-bar {
display: flex;
width: 100%;
justify-content: space-around;
flex-flow: row;
align-items: center;
max-width: calc(100% - 40px);
margin: 0 auto;
}
.progress-bar>li:first-child {
width: auto;
}
.progress-bar>li.active .tick {
border-color: red;
color: red;
}
.progress-bar>li.active .line {
background: red;
}
.progress-bar>li {
display: flex;
flex-flow: row;
width: 100%;
align-items: center;
}
.tick {
border-radius: 100%;
border: 5px solid black;
height: 30px;
width: 30px;
padding: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 600;
position: relative;
}
.tick>span {
position: absolute;
top: 70px;
max-width: 100px;
text-align: center;
word-wrap: break-word;
}
.line {
width: 100%;
height: 5px;
display: block;
background: black;
margin: 0 15px;
}<ul class="progress-bar">
<li class="active">
<div class="tick">
✔<span>CREATEVERYLONGTEXT</span>
</div>
</li>
<li>
<div class="line"></div>
<div class="tick">
✔<span>CHECK</span>
</div>
</li>
<li>
<div class="line"></div>
<div class="tick">
✔<span>DONE</span>
</div>
</li>
</ul>
答案 1 :(得分：1)
您可以使用flexbox和ul {
display: flex;
align-items: center;
justify-content: space-between;
list-style-type: none;
padding-left: 0;
margin-bottom: 50px;
}
li:not(:first-child) {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
li:not(:first-child):before {
flex: 1;
height: 1px;
background: black;
content: '';
margin: 0 10px;
}
li.active .step-inner-wrapper {
border-color: red;
color: red;
}
li.active:before {
background: red;
}
.step-inner-wrapper {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
border-radius: 50%;
position: relative;
}
.step-title {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 100%);
}伪元素来执行此操作。您可以在除第一个li元素之前的每个li元素之前创建线条，如果li具有活动类，则可以更改边框颜色和线条颜色。
<ul class="create-progress-bar">
<li class="active">
<span class="step-inner-wrapper">
<span class="step-icon">✔</span>
<span class="step-title">Create</span>
</span>
</li>
<li>
<span class="step-inner-wrapper">
<span class="step-icon">✔</span>
<span class="step-title">Check</span>
</span>
</li>
<li>
<span class="step-inner-wrapper">
<span class="step-icon">✔</span>
<span class="step-title">Done</span>
</span>
</li>
</ul>
<ul class="create-progress-bar">
<li class="active">
<span class="step-inner-wrapper">
<span class="step-icon">✔</span>
<span class="step-title">Create</span>
</span>
</li>
<li class="active">
<span class="step-inner-wrapper">
<span class="step-icon">✔</span>
<span class="step-title">Check</span>
</span>
</li>
<li class="active">
<span class="step-inner-wrapper">
<span class="step-icon">✔</span>
<span class="step-title">Check</span>
</span>
</li>
<li>
<span class="step-inner-wrapper">
<span class="step-icon">✔</span>
<span class="step-title">Check</span>
</span>
</li>
<li>
<span class="step-inner-wrapper">
<span class="step-icon">✔</span>
<span class="step-title">Done</span>
</span>
</li>
</ul>Navigation.registerComponent('WelcomeComponentScreen', () => (props) => (
<Provider store={reduxStore}>
<'WelcomeComponentScreen' {...props} />
</Provider>
), () => 'WelcomeComponentScreen');
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？