Foundation：偏移内柱和外柱一样多的方法？

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 行拉伸其 parent .small-5 列的整个宽度。

但是，我希望 lis - .small-9 和 .small-3 的内容偏移整个屏幕宽度的 1/12，就像 header 上面的行 (small-4 small-offset-1).

这个 fiddle 可能有助于解释我正在尝试做的事情：https://jsfiddle.net/4tp87v60/15/

有人知道这是否可以通过 Foundation 实现吗？

Answer 1

small-4 class 仅具有来自 .small-offset-1 的 8.33333% (100% / 12) 的左边距。

如果我没理解错的话，您只是想在 small-5 中偏移 <ul>。不幸的是，通过添加 Foundation classes 最接近的是 small-offset-3，它给出 margin-left: 25%.

但是，没有什么可以阻止您手动添加 27.33333% 的正确偏移量：

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

我创建了一个新的 fiddle 来展示这个 here。

编辑

为了简单地偏移<li>元素的内容，你只需要稍微调整一下：

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

其中一个 fiddle 可用 here。

希望这对您有所帮助！ :)

Foundation：偏移内柱和外柱一样多的方法？

Foundation: Way to offset inner columns as much as outer columns?

css

zurb-foundation