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

Question

我正在尝试用 flex 制作一个水平的旋转木马

现在我有一个包含可滚动内容的 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%);
}