Question

编辑：我想出了如何将它们粘贴到右上角..但我似乎无法找到解决方案，因此当我缩放浏览器时，这两个按钮之间的空间将保持不变。

我在bootstrap3模板中使用Flexslider。当我扩展我的浏览器时，一切正常工作我只是无法获得下一个和上一个按钮来坚持一个位置。

HTML：

 <div class="flexslider">
        <ul class="slides">
            <li>
                <img src="images/Slider/Earth_slider.png" />
                <figcaption class="flex-caption-long">
                    <p><h2 class="header-flex">VIDEO, WEB, SERVICE<br>für Raumfahrt, öffentliche Einrichtungen &amp; Industrie</h2></p>
                </figcaption>
            </li>
            <li>
                <img src="images/Slider/Rosetta_slider.png" />
                <figcaption class="flex-caption-middle">
                    <p><h2 class="header-flex">Die Reise des Satelitten Rosetta</h2></p>
                </figcaption>
            </li>
            <li>
                <img src="images/Slider/Showreel_slider.png" />
                <figcaption class="flex-caption">
                    <p><h2 class="header-flex">Showreel 2014</h2></p>
                </figcaption>
            </li>
            <li>
                <img src="images/Slider/DLR_slider.png" />
                <figcaption class="flex-caption-middle">
                    <p><h2 class="header-flex">DLR-DVD "Mars-Ein Planet voller Rätsel"</h2></p>
                </figcaption>
            </li>
            <li>
                <img src="images/Slider/ECMWF_slider.png" />
                <figcaption class="flex-caption-middle">
                    <p><h2 class="header-flex">Weltmarktführer ECMWF</h2></p>
                </figcaption>
            </li>
        </ul>
    </div>

CSS：

.flex-direction-nav a {
  top: 324px;
  margin: 0px;
  height: 50px;
  opacity: 1;
}

// Arrow right - always visible
.flexslider:hover .flex-direction-nav .flex-next {
  left: 93% !important;
}
.flex-next {
  left: 93% !important;
}

// Arrow left - always visible
.flexslider:hover .flex-direction-nav .flex-prev {
  left: 89% !important;
}
.flex-prev {
  left: 89% !important;
}

Answer 1

尝试以下操作 - 而不是使用left使用权限：

.flex-next {
    right: 10px; 
    left:auto;
}
.flex-prev {
    right: 50px; /*this value should be the width of the buttons can be in percent if needed*/
    left:auto;
    margin-left: -20px; /* this is minus the value of the right for flex-next plus the amount of space you want in between the buttons*/
}

或者不是定位按钮，而是将位置绝对添加到ul（从下一个和上一个中移除所有定位）：

.flex-direction-nav {
    position:absolute;
    top: 324px;
    right: 50px;
    text-align:right;
}

.flex-direction-nav li { 
    display:inline-block; 
    margin-left:10px; /*amount of space you want between buttons*/
}

Flexslider - 固定下一个/上一个按钮的位置？

1 个答案: