基礎：抵消內柱的方式與外柱一樣多？

Question

我已成立了這樣幾行：

<div class="header row"> 
    <div class="small-4 small-offset-1 columns"> 
    left 
    </div> 
    <div class="small-7 columns"> 
    right 
    </div> 
</div> 

<div class="content row"> 
    <div class="small-5 columns"> 
    left 
    <ul> 
    <li class="row"> 
     <div class="small-9 columns">list info</div> 
     <div class="small-3 columns">list info</div> 
    </li> 
    <li class="row"> 
     <div class="small-9 columns">list info</div> 
     <div class="small-3 columns">list info</div> 
    </li> 
    </ul> 
    </div> 
    <div class="small-7 columns"> 
    right 
    </div> 
</div> 

我想li行舒展他們的父母.small-5列的全部寬度。

但是，我要li S的內容 - .small-9和.small-3由1/12整個屏幕的寬度以上（small-4 small-offset-1）偏移，酷似標題行。

這撥弄可能有助於解釋什麼，我試圖做的：https://jsfiddle.net/4tp87v60/15/

會有人知道這是可以實現的與基金？

Answer 1

該small-4類只是有一個空餘的來自.small-offset-18.33333%（100％/ 12）。

如果我理解正確，您只需要抵消<ul>,small-5。不幸的是，通過添加Foundation類可以做到的最接近的是small-offset-3，它給出了margin-left: 25%。

然而，沒有什麼阻止你添加正確的手動27.33333%偏移：

.small-5 ul { 
    margin-left: 27.33333%; 
} 

我創建了一個新的小提琴展示這個here。

編輯

爲了簡單地抵消<li>元素的內容，你只需要稍微調整這：

.small-5 ul .small-9 { 
    padding-left: 25%; // Equivalent to three columns at 8.33333% 
} 

這方面的一個次要小提琴可用here。

希望這會有所幫助！ :)