css - 从轮播框架中获取轮播控制箭头

我有一个指令，基本上是Angular UI引导程序中轮播的扩展。

但是，我一直在尝试通过覆盖CSS（使用我自己的）来使轮播控制箭头脱离框架，但是没有运气。
我已经尝试过此post中的建议，但还是没有运气。

解决方法是，我使用AngularJS的脚本指令定义了自己的轮播控件箭头类，而不是自举程序中的预定义类：

<script ... type="text/ng-template">

<div class='carousel' ng-mouseenter="pause()" ng-mouseleave="play()" ng-swipe-right="prev()" ng-swipe-left="next()">
    <div class="carousel-inner" ng-transclude></div>
    <a class="left-control" ng-click="prev()"> ...</a> //dont use the one from bootstrap which is carousel-control left
</div>
</script>

我的CSS：

    .carousel {margin-left: 45px; margin-right: 25px;}

    .left-control, .right-control {
         background: none;
        border: none;
   }
.left-control {margin-left: -45px; color: black;}
.right-control {margin-right: -45px; color: black;}

我试图将它们很好地对齐到CSS的1行中（左箭头，轮播内部和右箭头），但我仍然无法使所有3个元素正确对齐。任何帮助表示赞赏，谢谢！

最佳答案

您可以尝试以下代码：

.left-control,.right-control { position:absolute; }
.left-control {margin-left: -45px; color: black;}
.right-control {margin-right: -45px; color: black;}

它使元素成为绝对元素，因此可以相当自由地放置它们。您可能希望使用right:-10px为.right-control进行更多调整。 10px取决于元素的大小。左控制按钮也是如此。

关于css - 从轮播框架中获取轮播控制箭头，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28684497/