0

有人知道我如何将内容(div-menu)放在我的弹性幻灯片(li)内(在滑动图片上):

Flex 滑块默认代码:

<div class="wrapper_top">
<div class="flexslider">
    <ul class="slides">

    <li>
    <img src="img/s1.jpg" />
    </li>

    <li>
    <img src="img/s2.jpg" />
    </li>


    </ul>

    </div>
</div>

我想放例如.willbemenu div。这是我想要的图片: http: //s7.postimg.org/5ul8zk1d7/WILLBE.jpg

.willbemenu{width: 1000px; background-color: orange; padding: 10px; text-align: center;}

我尝试这种方式并工作,但问题是当 flex 滑块滑动时,我需要 willbemenu div FIXED 而不滑动。

<div class="flexslider">
  <ul class="slides">
    <li style="background-image: url(img/s1.jpg);">
      <div class="willbemenu">Some option Some option</div>
    </li>
</div>
4

1 回答 1

3

在绝对定位之外使用 div;您可以使用 css 技巧来居中。

<style>
    .willbemenu{ width:1000px; background-color:orange; padding:10px; text-align:center; }
    .willbemenu{ position:absolute; top:10px; left:50%; margin-left:-500px; z-index:1; }
</style>

<div class="flexslider">
    <div class="willbemenu">Some menu stuff</div>

    <ul class="slides">
        <li><img src="img/s1.jpg" /></li>
        <li><img src="img/s2.jpg" /></li>
    </ul>
</div>
于 2013-08-24T00:30:18.243 回答