如何在可滚动div的左侧和右侧定位按钮

Question

我试图用弯曲的角度材料制作水平旋转木马

现在我有一个带有可滚动内容的div，我只想将按钮放在div的左侧和右侧

您可以将按钮移动到外面

我试图实现这样的目标：

我附加了一个codepen

https://codepen.io/williamscott701/pen/dWEjQy?editors=1010

 <div layout="row">
  <div flex></div>
  <div flex=80 flex-sm=100 flex-xs=100>

    <div layout="row" style="overflow: auto;" id="myDIV">

      <md-button id="left" class="md-button"> << </md-button>

      <md-button id="right" class="md-button"> >> </md-button>

      <div ng-repeat="y in [1,2,3,4,5,6,7,8,9,10,11,12,13,2342,234,345,34,545,6111,567,78,69,67]">
        <md-card>
          <md-card-title>
            <md-card-title-text>
              <span class="md-headline">Card with image</span>
              <span class="md-subhead">Large</span>
            </md-card-title-text>
            <md-card-title-media>
              <div class="md-media-lg card-media"></div>
            </md-card-title-media>
          </md-card-title>
          <md-card-actions layout="row" layout-align="end center">
            <md-button>Action 1</md-button>
            <md-button>Action 2</md-button>
          </md-card-actions>
        </md-card>
      </div>
    </div>

  </div>
  <div flex></div>
</div>

Answer 1

只是一些简单的CSS。当然，如果你愿意，你可以使用CSS flexbox来做到这一点。

#myDIV {
  position: relative;
}
#left {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
#right {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}