1

我正在使用带有 Orbit 滑块的 Foundation 4。我想将它用作内容滑块。

是否可以将基础中的行放在轨道滑块中而不会弄乱 Orbit 的边距？

<ul data-orbit>
        <div class="row">
            <div class="large-7 small-12 columns">
                <h1>Hallo</h1>
            </div>
        </div>
        <div class="row">
            <div class="large-7 small-12 columns">
                <h1>Doei</h1>
            </div>
        </div>
        <img src="img/slider/1.jpg">        
    </ul>

有 3 个滑块项目。2 个带有行类的 div 和 1 个全角图像。此示例与类行的边距混淆。我想添加边距，以便具有行类的 div 将在中间对齐。

4

1 回答 1

0

我不确定我是否能很好地理解您的问题，但是如果您想要 3 张幻灯片（2 张在大屏幕中间带有文本，1 张带有图像），我认为这段代码应该可以工作（但是我没有测试它）：

如果将.large-centered类添加到<li>标签中，它们会自动将文本对齐到中间，并且您不必关心 css 中的边距。

<div class="row">
  <div class="large-12 columns">
    <div class="orbit-container">
      <ul data-orbit="">
        <li class="row">
          <div class="large-7 large-centered small-12 columns"><h1>Hallo</h1></div>
        </li>
        <li class="row">
            <div class="large-7 large-centered small-12 columns"><h1>Doei</h1></div>
        </li>
        <li><img src="img/slider/1.jpg" alt=""></li>        
      </ul>
    </div>
  </div>
</div>
于 2013-10-30T20:51:37.157 回答