Zurb Foundation - 轨道滑块 - 图像不占用全宽答案

【问题标题】：Zurb Foundation - orbit slider - images don't take full widthZurb Foundation - 轨道滑块 - 图像不占用全宽
【发布时间】：2017-03-22 11:55:54
【问题描述】：

我在使用图像滑块时遇到了问题。我只占行的一半（旁边会有文本），所以我的代码如下：

<div="row">
<div class="small-12 medium-6 columns">

            <div class="orbit" role="region" aria-label="" data-orbit>
              <ul class="orbit-container">

                <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
                <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>

                <li class="is-active orbit-slide">
                  <img class="orbit-image" src="assets/exteriery/img-02.jpg" alt="">
                </li>               

                <li class="orbit-slide">
                  <img class="orbit-image" src="assets/exteriery/img-06.jpg" alt="">
                </li>

                <li class="orbit-slide">
                  <img class="orbit-image" src="assets/exteriery/img-11.jpg" alt="">
                </li>
              </ul>
              <nav class="orbit-bullets">
                <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
                <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
                <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
                <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
                <button data-slide="4"><span class="show-for-sr">Fifth slide details.</span></button>
                <button data-slide="5"><span class="show-for-sr">Sixth slide details.</span></button>

              </nav>
            </div> <!-- orbit -->
          </div> <!-- -->

<div class="small-12 medium-6 columns"></div>
</div>

我遇到的问题是图像没有占用轨道容器的全尺寸。这是它的样子： .orbit 有红色边框。
.orbit-container 有绿色边框和黄色背景。
我没有以任何其他方式设置.orbit 或.orbit-container 的样式。

如图所示，图像没有占据.orbit 的全宽，这使得箭头也没有居中。我尝试过使用不同的宽度、填充、边距，但似乎没有任何效果。即使我给 .orbit 一个特定的宽度（我尝试了 650 像素），右侧仍然存在间隙。图片足够大（这个具体是 3264px x 2448px），我没有在我的 css 中以任何其他方式设置图片样式。

我需要做什么来解决这个问题？谢谢。

编辑：我已经创建了一支 CodePen 笔，它在那里运行良好...CodePen example。不知道我做了什么以及在哪里，将尝试重新编写该部分并找到错误。

【问题讨论】：

请发布一个工作示例。
你是什么意思，一个有效的例子？我发布了我的代码和图像。我没有其他要展示的了。
我的意思是一个工作小提琴/plunker/codepen sn-p，所以我可以真正看到滑块中发生的事情。
好的，我需要准备这个，所以我会在完成后回复。对此感到抱歉。
它在 CodePen 上运行良好（上面插入了链接）。不知道我做了什么以及它在我的本地网站上不起作用的地方：/

标签： html css zurb-foundation orbit

【解决方案1】：

刚刚碰到这个（除了图片的左边），这是因为我在这个元素上应用了填充：

<ul class="orbit-container">

所以这个 css 应该修复它：

ul.orbit-container {
  padding-right: 0 !important;
}

【讨论】：