使用餘燼的垂直圖

我一直在開發一個圖來顯示相關項目：jsfiddle使用bootstrap 3.0。在這個例子中，我沒有使用Ember。這是一個非常簡單的例子。使用餘燼的垂直圖

但它的問題是當我使用Ember動態生成項目。該圖不顯示爲在第一個，最後一個和唯一的子選擇器上獲得的。這是因爲灰燼之前和元素後添加一個或兩個腳本標記：

<div class="level closed" style="display: block;"> 
    <script id="metamorph-218-start" type="text/x-placeholder"></script><script id="metamorph-216-start" type="text/x-placeholder"></script> 
    <div class="item"> 
    <span class="title"><script id="metamorph-219-start" type="text/x-placeholder"></script>Element name 1<script id="metamorph-219-end" type="text/x-placeholder"></script></span> 
    </div> 
    <script id="metamorph-216-end" type="text/x-placeholder"></script><script id="metamorph-217-start" type="text/x-placeholder"></script> 
    <div class="item"> 
    <span class="title"><script id="metamorph-220-start" type="text/x-placeholder"></script>Element name 2 <script id="metamorph-220-end" type="text/x-placeholder"></script></span> 
    </div> 
    <script id="metamorph-217-end" type="text/x-placeholder"></script><script id="metamorph-218-end" type="text/x-placeholder"></script> 
    </div>

所以對於我所用：

.level >.item:nth-child(3):before { 
    width: 10px; 
    height: 50%; 
    top: 50%; 
    margin-top: 2px; 
    border-top-left-radius: 10px; 
} 
.level >.item:nth-child(3):after { 
    height: 10px; 
    border-top-left-radius: 10px; 
} 

.level > .item:nth-last-child(3):before { 
    width: 10px; 
    height: 50%; 
    border-bottom-left-radius: 10px; 
} 
.level >.item:nth-last-child(3):after { 
    height: 10px; 
    border-top: none; 
    border-bottom: 2px solid #eee9dc; 
    border-bottom-left-radius: 10px; 
    margin-top: -7px; 
}

問題是，當我只有一個孩子。沒有餘燼我用了下面的CSS。

.item:only-child::after { 
    border-bottom: 2px solid #eee9dc !important; 
    border-left: 0px !important; 
    border-bottom-left-radius: 0px !important; 
    margin-top: -7px !important; 
    width: 48px; 
    left: -48px; 
} 

.item:only-child::before {  
    width: 0px !important; 
}

但正如你所看到的，因爲燼添加這個腳本標籤沒有獨生子女和這個CSS不適用。

來源

2013-10-24 Juan Jardim

如果在代碼生成這些，然後你應該能夠動態地給它們類名，並且使用這些類名來代替只有子類或者子類。哦，你那張小提琴看起來很漂亮。 – cjd82187

因此，要解決，我已經在CSS substitu獨生子女選擇只-的型

.item:only-of-type::after { 
    border-bottom: 2px solid #eee9dc !important; 
    border-left: 0px !important; 
    border-bottom-left-radius: 0px !important; 
    margin-top: -7px !important; 
    width: 48px; 
    left: -48px; 
} 

.item:only-of-type::before {  
    width: 0px !important; 
}

感謝您的幫助和評論

來源

2013-10-24 20:09:44

使用餘燼的垂直圖

回答

相關問題