3

我正在使用 Foundation Orbit 滑块。它工作正常，只是我需要将一些 css（移动标题）应用于页面上的特定滑块。

如果我使用以下选择器，它会进行更改，唯一的问题是全局更改。

.orbit-wrapper .orbit-caption
{
    bottom:-30px;
}

我用容器 div 的 id 尝试了不同的选择器，但它从未被应用。

#promotion .orbit-caption
{
    bottom:-30px;
}

如果我在浏览器中检查 css 值，就会发现正确的值，但它们不会以某种方式应用于元素。只有当我像上面第一个示例中那样更改选择器时，我才会得到更改。

我不是 css 专家，但我尝试过的选择器在正常情况下可以正常工作。

我做错了什么？

4

3 回答 3

1

你确定元素有position: relative; ?

.orbit-wrapper .orbit-caption
{
    position: relative;
    bottom:-30px;
}

没有那个或位置：绝对的；“底部”属性不会做任何事情。

于 2012-10-11T16:22:46.000 回答
0

好的，所以我发现了发生了什么。Orbit 将标题元素复制到原始轨道容器（我的 div）之外的元素。我从一开始就没有注意到这一点，因为它把原始字幕留在了我创建它们的地方，所以我正在调试它们。

解决方案是创建另一个包装元素并将其用作标题的选择器。如果我创建一个 id=promotion-wrapper 包含轨道滑块 div 的 div，则以下内容有效。

#promotion-wrapper .orbit-caption
{
    bottom:-30px;
}
于 2012-10-11T17:35:27.150 回答
0

我找到了一个新的简单的解决方案，

只需添加margin-top并将位置更改为相对

.orbit-container .orbit-slides-container > * .orbit-caption {
    position: relative;
    bottom: 0;
    margin-top:40px;
    background-color:#F3F3F3;
    color: black;
    width: 100%;
    padding: 10px 14px;
    font-size: 0.875em; }
于 2013-08-26T18:08:41.943 回答