Question

我试图在我的应用程序中使用一些角度的第三方库作为旋转木马。我也使用Angular-Material进行布局。问题是，当我使用此库的指令插入<ul></ul>元素时，我的元素不想使用此内容进行扩展：

<div layout="row" layout-align="center center" layout-padding style="overflow-x: hidden;
  overflow-y: hidden;">
    <div flex-sm="65" flex="40">
        <ul rn-carousel rn-carousel-transition="hexagon" rn-carousel-buffered
            class="ul-carousel">
            <li ng-repeat="card in cards">
                <md-card>
                    <img  imageonload="setImageLoading(imageLoading)" current-slide="carouselIndex"
                          ng-src="{{card.imageCoverRep.url}}"
                          ng-click="goCardDetails(card)">
                </md-card>
            </li>
        </ul>
    </div>
</div>

这是旋转木马的css：

input[type=range] {
  width:300px;
}

ul[rn-carousel] {
  overflow:hidden;
  padding:0;
  white-space: nowrap;
  position: relative;
  perspective:1000px;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  > li {
    color:black;
    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;
  }
}

/* prevent flickering when moving buffer */
ul[rn-carousel-buffered] > li {
  display:none;
}

ul[rn-carousel-transition="hexagon"] {
  overflow:visible;
}

/* indicators */
div.rn-carousel-indicator span {
  cursor:pointer;
  color: #666;
  &.active {
    color: white
  }
}

/* prev/next controls */
.rn-carousel-control {
  transition: opacity 0.2s ease-out;
  font-size: 2rem;
  position: absolute;
  top: 40%;
  opacity: 0.75;
  cursor: pointer;
  &:hover {
    opacity: 1;
  }

  &.rn-carousel-control-prev {
    left: 0.5em;
    &:before {
      content: "<";
    }
  }

  &.rn-carousel-control-next {
    right: 0.5em;
    &:before {
      content: ">";
    }
  }
}

Answer 1

在我看到的内容中，您使用过＆＃34; position：absolute＆＃34;对于＆gt; li，请尝试将其删除并将其更改为float。

Div内部没有内容

1 个答案: