使用CSS垂直連接線

-1

我想在每個圓之間有一條連接垂直線。「部分」在垂直高度上是動態的。使用CSS垂直連接線

這裏是目前上海社會科學院：

@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>

來源

2017-02-10 Sam

@MichaelCoker我在問題中添加了呈現的CSS。 – Sam

你的CSS [看起來不完整]（https://jsfiddle.net/websiter/86foqfdh/）。請鏈接缺少的資源。 '../ sass/sa.common.sass'中有什麼？ –

@AndreiGheorghiu常見的是所有變量。沒有其他的。應該重新命名它。 – Sam

並非所有瀏覽器都對display:table上的元素顯示::before。（我有一個預感，你正在FF中體驗到這一點？ - 在Chrome中顯示）。有兩種可能的解決方法：

要麼與display:flex和display: table-cell與display: block取代display:table ...
...或使用適當html元素（div的？），而不是僞元素的線條。

其他注意事項可能對您有用：

刪除z-index從.step::before
變化height:125%到height:calc(100% + {N}px)其中{N}是.circle和40px實際高度之間的px的差異（上邊距的.step）。使用這種技術，您可以控制線條的精確大小，並匹配到像素之間的圓圈之間的間隙，因此不需要隱藏多餘的線條長度。

希望以上內容有意義並有所幫助。別忘了autoprefix。

來源

2017-02-10 02:05:35

喜歡的東西：

.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; 
    } 
}

進行一些調整，它應該按需要工作。

來源

2017-02-10 01:40:05

使用CSS垂直連接線

回答

相關問題