html - 使用 CSS 的垂直连接线

Question

我想在每个圆圈之间有一条垂直连接线。 “部分”在垂直高度上是动态的。

这是当前的 SASS:

@import '../sass/sa.common';
$color: $sa-gray-4;
$colorActive: $sa-green;
$colorComplete: $sa-green;
.progress-indicator {
  margin-bottom: 50px;
  margin-top: 75px;
  .step {
    margin-top: 40px;
    content: "";
    display: table;
    clear: both;
    position: relative;
    &:first-child {
      margin-top: 0;
    }
    &:last-child {
      div {
        &.circle {
          &:before {
            display: none;
          }
        }
      }
    }
    &.active {
      div {
        color: $colorActive;
        &.circle {
          border-color: $colorActive;
        }
        a {
          color: $colorActive;
        }
      }
    }
    &.complete {
      div {
        color: $colorComplete;
        &.circle {
          border-color: $colorComplete;
          &.filled {
            background-color: $colorComplete;
            color: $sa-white;
          }
        }
      }
    }
    div {
      color: $color;
      display: table-cell;
      float: left;
      padding-top: 2px;
      font-size: 16px;
      font-weight: bold;
      vertical-align: middle;
      &.circle {
        height: 30px;
        width: 30px;
        text-align: center;
        border: 2px solid $color;
        border-radius: 50%;
        &:before {
          content: "";
          position: absolute;
          z-index: 1;
          margin-top: 26px;
          left: 13px;
          border: 1px solid $sa-gray-4;
          height: 125%;
        }
      }
      &.text {
        padding-left: 10px;
        padding-top: 5px;
        ul {
          margin: 0;
          margin-top: 15px;
          padding: 0;
          list-style-type: none;
          li {
            a {
              display: block;
              margin-top: 5px;
              &:first-child {
                margin-top: 0;
              }
            }
          }
        }
      }
    }
  }
}

CSS:

<style type="text/css">@charset "UTF-8";
.btn.btn-green {
  background-color: #80b241;
  color: #ffffff; }
  .btn.btn-green:hover {
    background-color: #88bc47; }

.btn.btn-gray-1 {
  background-color: #595959;
  color: #e7e5e1; }
  .btn.btn-gray-1:hover {
    background-color: #666666; }

.label.label-green {
  background-color: #80b241;
  color: #242424; }

.label.label-gray-1 {
  background-color: #595959;
  color: #ffffff; }

.btn.btn-green {
  background-color: #80b241;
  color: #ffffff; }
  .btn.btn-green:hover {
    background-color: #88bc47; }

.btn.btn-gray-1 {
  background-color: #595959;
  color: #e7e5e1; }
  .btn.btn-gray-1:hover {
    background-color: #666666; }

.label.label-green {
  background-color: #80b241;
  color: #242424; }

.label.label-gray-1 {
  background-color: #595959;
  color: #ffffff; }

.progress-indicator {
  margin-bottom: 50px;
  margin-top: 75px; }
  .progress-indicator .step {
    margin-top: 40px;
    content: "";
    display: table;
    clear: both;
    position: relative; }
    .progress-indicator .step:before {
      content: "";
      position: absolute;
      z-index: 1;
      margin-top: 26px;
      left: 13px;
      border: 1px solid #ADABA6;
      height: 125%; }
    .progress-indicator .step:first-child {
      margin-top: 0; }
    .progress-indicator .step:last-child:before {
      display: none; }
    .progress-indicator .step.active div {
      color: #80b241; }
      .progress-indicator .step.active div.circle {
        border-color: #80b241; }
      .progress-indicator .step.active div a {
        color: #80b241; }
    .progress-indicator .step.complete div {
      color: #80b241; }
      .progress-indicator .step.complete div.circle {
        border-color: #80b241; }
        .progress-indicator .step.complete div.circle.filled {
          background-color: #80b241;
          color: #ffffff; }
    .progress-indicator .step div {
      color: #ADABA6;
      display: table-cell;
      float: left;
      padding-top: 2px;
      font-size: 16px;
      font-weight: bold;
      vertical-align: middle; }
      .progress-indicator .step div.circle {
        height: 30px;
        width: 30px;
        text-align: center;
        border: 2px solid #ADABA6;
        border-radius: 50%; }
      .progress-indicator .step div.text {
        padding-left: 10px;
        padding-top: 5px; }
        .progress-indicator .step div.text ul {
          margin: 0;
          margin-top: 15px;
          padding: 0;
          list-style-type: none; }
          .progress-indicator .step div.text ul li a {
            display: block;
            margin-top: 5px; }
            .progress-indicator .step div.text ul li a:first-child {
              margin-top: 0; }

.category-selector {
  margin-top: 30px; }
  .category-selector .header {
    border-bottom: 2px solid #80b241; }
    .category-selector .header:before, .category-selector .header:after {
      content: " ";
      display: table; }
    .category-selector .header:after {
      clear: both; }
  .category-selector .section-container:before, .category-selector .section-container:after {
    content: " ";
    display: table; }
  .category-selector .section-container:after {
    clear: both; }
  .category-selector .section-container .section {
    float: left;
    height: 400px;
    min-width: 150px;
    overflow-y: scroll; }
    .category-selector .section-container .section .item {
      border-bottom: 1px solid #80b241;
      cursor: pointer;
      padding: 5px 10px 5px 5px; }
      .category-selector .section-container .section .item:last-child {
        border: 0; }
      .category-selector .section-container .section .item.active {
        background-color: #80b241;
        color: #ffffff; }
</style>

和标记:

<div class="row">
    <div class="col-lg-3">
        <div class="progress-indicator">
            <div class="step">
                <div class="circle">1</div>
                <div class="text">Select Category</div>
            </div>
            <div class="step active">
                <div class="circle">2</div>
                <div class="text">
                    Fill Out Listing
                    <ul>
                        <li>
                            <a href="#">Vital Fields</a>
                            <a href="#">Image Url</a>
                            <a href="#">Dimensions</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="step">
                <div class="circle">3</div>
                <div class="text">Bulk Options</div>
            </div>
            <div class="step">
                <div class="circle">4</div>
                <div class="text">More Options</div>
            </div>
        </div>

        <div class="text-center">
            <button class="btn btn-default" style="margin-bottom: 10px;">
                SAVE AS DRAFT
            </button>
            <button class="btn btn-gray-1">
                MOVE TO PUBLISH QUEUE
            </button>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="category-selector">
            <div class="header">
                <div class="pull-left">
                    <h4>Select a Category</h4>
                </div>
                <div class="pull-right">
                    <button class="btn btn-green">Next</button>
                </div>
            </div>
            <div class="section-container">
                <div class="section">
                    <div class="item" [ngClass]="{active: selectedCategory && category.id === selectedCategory.id}" *ngFor="let category of topLevelCategories" (click)="getSubCategories(category)">
                        {{category.displayName}}
                    </div>
                </div>
                <div class="section" *ngIf="subCategories && subCategories.length > 0">
                    <div class="item" [ngClass]="{active: selectedSubCategory && subCategory.id === selectedSubCategory.id}" *ngFor="let subCategory of subCategories" (click)="getFields(subCategory)">
                        {{subCategory.displayName}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        Side Nav/Slide In
    </div>
</div>

Answer 1

并非所有浏览器都支持在具有 display:table 的元素上显示 ::before。 (我有预感你在 FF 中遇到过这种情况？ - 在 Chrome 中显示)。有两种可能的修复方法:

1. 将 display:table 替换为 display:flex 并将 display: table-cell 替换为 display: block ...
2. ...或使用适当的 html 元素(divs？)代替行的伪元素。

您可能会发现有用的其他注释:

• 从 .step::before 中移除 z-index
• 将 height:125% 更改为 height:calc(100% + {N}px) 其中 {N} 是 px 在 .circle 的实际高度和 40px 之间(.step 的上边距)。使用此技术，您可以控制线条的精确大小并将圆圈之间的间隙匹配到像素，因此无需隐藏额外的线条长度。

希望以上内容有意义并有所帮助。不要忘记autoprefix。