Angular Carousel - <li>元素需要“position：absolute”？</li>

Question

我很难让rn-carousel正常工作 幻灯片2+全部不在位置
......直到我偶然发现这个（看似无关的）问题：
https://github.com/revolunet/angular-carousel/issues/245

我添加了以下课程，使得工作完美：

ul[rn-carousel] > li {
    color: black;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: visible;
    vertical-align: top;
    position: absolute;
    left: 0;
    right: 0;
    white-space: normal;
    padding: 0;
    margin: 0;
    list-style-type: none;
    width: 100%;
    height: 100%;
    display: inline-block; }

然后我开始消除所有CSS样式，直到找到修复问题的样式：

显然＆＃34;职位：绝对＆＃34;是所有<li>元素的必需CSS样式

（相当有限的）文件中没有提到......
- 我在某个地方有虫吗？ - 这是一个我不知道的标准CSS问题吗？ （有关信息，rn-carousel指令会自动将display: inline-block添加到<li>

在以下版本范围内尝试了相同的结果：
- 转盘版本0.3.5 - 0.3.9
- angularjs版本1.3.0 - 1.3.12

Plunker

Answer 1

父级容器（position: relative）上的

ul和孩子（position: absolute）上的li是角度轮播正常工作所必需的。

包含默认的angular-carousel.css样式表会添加以下定义：

ul[rn-carousel] {
  //...
  position: relative;
  //...
  }

  ul[rn-carousel] > li {
    //...
    position: absolute;
    //...
    }

这不应该干扰您需要对li的内容进行的任何自定义样式。如有必要，您可以将内容包装在div并将任何样式命名空间包装到该元素的类中。