基礎：内側の列を外側の列だけオフセットする方法は？

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が正確（small-4 small-offset-1）上記ヘッダ行と同様に、1/12画面全体の幅だけオフセットされます。

このバイオリンは私が何をしようとしている説明を助けるかもしれない：これは財団と達成可能である場合https://jsfiddle.net/4tp87v60/15/

誰もが知っているだろうか？

Answer 1

small-4クラスは、.small-offset-1から始まり、8.33333%（100％/ 12）の単純な余白を持ちます。

あなたが正しく理解している場合は、<ul>をオフセットしてsmall-5にするだけです。残念ながら、Foundationクラスを追加することで最も近いのはsmall-offset-3で、margin-left: 25%となります。私はこのhereを展示新しいフィドルを作成しました

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

：

ただし、手動で27.33333%の正しいオフセットを加える止めるものは何もありません。

EDIT

単に<li>要素の内容を相殺するために、あなたは、単にわずかにこれを調整する必要があります。

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

本の二次フィドルが利用可能hereです。

希望すると便利です。 :)