使用CSS的垂直连接线

时间：2017-02-10 00:46:56

标签： html css sass user-experience

我想在每个圆圈之间有一条连接的垂直线。 ＆＃34;章节＆＃34;垂直高度是动态的。

Menu

这是当前的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>

2 个答案:

答案 0 :(得分：2)

并非所有浏览器都尊重::before对display:table元素的显示。 （我有预感你在FF中遇到这种情况吗？ - 在Chrome中显示它们）。有两种可能的解决方法：

  1. 将display:table替换为display:flex，将display: table-cell替换为display: block ...
  2. ...或使用正确的html元素（div？）而不是行的伪元素。

    3. 您可能会觉得有用的其他说明：

    • 从z-index
      • 中移除.step::before
    • 将height:125%更改为height:calc(100% + {N}px)其中{N}是px与.circle的实际高度40px之间的差异（.step的上边距autoprefix 1}}）。使用这种技术，您可以控制线条的精确尺寸，并将圆圈之间的间隙与像素相匹配，从而无需隐藏额外的线条长度。

    希望上述内容有意义并有所帮助。不要忘记RewriteRule ^(.*)/?$ single-product.php?view_product=$1 [NC,L]。

答案 1 :(得分：1)

类似的东西：

.step {
    position: relative;
    &:after {
         content: "";
         position: absolute;
         top: 0;
         left: 30px; // magic number, try until you get the right positioning

         width: 1px;
         height: 100%;

         border-left: 2px solid $any-color-you-like;
   }
}

进行一些调整，它应该可以根据需要运作。

相关问题
最新问题