基础：抵消内柱的方式与外柱一样多？

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。

希望这会有所帮助！ :)