时间戳

首页 > 解决方案 > CSS BUG：箭头进度条高度不匹配

html - CSS BUG：箭头进度条高度不匹配

问题描述

我正在尝试实现带箭头的进度条，但遇到了 CSS 错误。当我增加内容的高度时，附加箭头的高度不会增加。尝试运行代码 spinnet，您将了解我面临的错误。错误基于 CSS 和三角形/箭头进度条内容高度

ol.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Liberation Sans', Verdana, 'Verdana Ref', sans-serif;
  font-size: 13px;
  line-height: 20px;
  font-weight: bold;
  counter-reset: li;
}

ol.steps li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  text-align: center;
  color: #3a3a3a;
  background: #dae4eb;
  position: relative;
  margin-left: 43px;
}

ol.steps li:after {
  position: absolute;
  top: 30%;
  left: 100%;
  content: " ";
  height: 0;
  width: 0;
  pointer-events: none;
  border: solid transparent;
  border-left-color: #dae4eb;
  border-width: 19px;
  margin-top: -19px;
}

ol.steps li:first-child {
  margin-left: 0;
}

ol.steps li:first-child span {
  padding: 9px;
}

ol.steps li:first-child span:after {
  border: none;
}

ol.steps li:last-child:after {
  border-width: 0;
}

ol.steps li span {
  display: block;
  padding: 9px 28px 9px 9px;
}

ol.steps li span:after {
  position: absolute;
  top: 50%;
  right: 100%;
  content: " ";
  height: 0;
  width: 0;
  pointer-events: none;
  border: solid #dae4eb;
  border-left-color: transparent;
  border-width: 19px;
  margin-top: -19px;
}

ol.steps li span:before {
  content: counter(li) " ";
  counter-increment: li;
}

ol.steps>li {
  float: left;
}

ol.steps li.current {
  height: 60px;
  color: #fff;
  background: #0078b4;
}

ol.steps li.current:after {
  border-left-color: #0078b4;
}


ol.steps li.current span:after {
  border-color: #7b7b7b;
  border-left-color: transparent;
}

ol.steps li.step1 {
  z-index: 9;
}

ol.steps li.step2 {
  z-index: 8;
}

ol.steps li.step3 {
  z-index: 7;
}

ol.steps li.step4 {
  z-index: 6;
}

ol.steps li.step5 {
  z-index: 5;
}

ol.steps li.step6 {
  z-index: 4;
}

ol.steps li.step7 {
  z-index: 3;
}

ol.steps li.step8 {
  z-index: 2;
}

ol.steps li.step9 {
  z-index: 1;
}

ol.steps li.step10 {
  z-index: 0;
}
<ol class="steps">
  <li class="step1 current"><span><br>Submitted</span></li>
  <li class="step2"><span><br>.</span></li>
  <li class="step3"><span><br>.</span></li>
  <li class="step4"><span><br>.</span></li>
  <li class="step5"><span><br>.</span></li>
</ol>

错误图像：在此处输入图像描述

我尝试了许多 CSS 调整，但成功匹配了高度所需的结果：所需的结果

标签： htmlcss

解决方案

我修改了几行代码并绘制了具有相同高度的进度箭头并展平了第一个列表和最后一个列表。

*, *:before, *:after{
  box-sizing: border-box;
}
body{
  padding: 0;
  margin: 0;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
ol.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Liberation Sans', Verdana, 'Verdana Ref', sans-serif;
  font-size: 13px;
  line-height: 20px;
  font-weight: bold;
  counter-reset: li;
}
ol.steps li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  text-align: center;
  color: #3a3a3a;
  background: #dae4eb;
  position: relative;
  margin-left: 2px;
  padding-right: 0px;
  padding-left: 60px;
  transition: 300ms;
  float: left;
}
ol.steps li:before, ol.steps li:after {
  position: absolute;
  content: " ";
  height: 60px;
  width: 60px;
  background-color: #dae4eb;
  z-index: 10;
  top: 0;
  transform: rotate(-45deg);
  right: -18px;
  transition: 300ms;
}
ol.steps li:before{
  right: auto;
  left: -40px;
  background-color: #fff;
  pointer-events: none;
  z-index: 1;
}
ol.steps li:first-child {
  margin-left: 0;
  background-color: red;
  padding-left: 30px;
}
ol.steps li:first-child:before{
  display: none;
}
ol.steps li span {
  display: block;
  position: relative;
  padding: 9px 28px 9px 9px;
  z-index: 50;
  pointer-events: none;
}
ol.steps li span:before {
  content: counter(li);
  counter-increment: li;
  display: block;
}
ol.steps li.current, ol.steps li:hover{
  color: #fff;
  background: #0078b4;
  cursor: pointer;
}
ol.steps li.current:after, ol.steps li:hover:after {
  background-color: #0078b4
}
<ol class="steps">
  <li class="step1 current"><span>Begin</span></li>
  <li class="step2"><span>ABC</span></li>
  <li class="step3"><span>CDE</span></li>
  <li class="step4"><span>EFG</span></li>
</ol>

推荐阅读