如何定位一个可滚动的DIV的左，右两侧的按钮

Question

我试图使角材水平旋转木马使用Flex

现在我已经用它滚动内容股利，我只是想将在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%); 
}