css - react 箭头位置/CSS

Question

您好，我有一个轮播以及上一个和下一个按钮

我需要将它们留在设置了最大宽度的容器中

但我不明白
码：

  <CarouselProvider
    visibleSlides={1}
    totalSlides={6}
    step={1}
    naturalSlideWidth={400}
    naturalSlideHeight={500}
    hasMasterSpinner
  >

    <div className="root">
      <Slider className="slider">
        <Slide index={0}>
          <Image  style={{maxHeight: 500}} src="https://cdn.pixabay.com/photo/2015/10/16/19/18/balloon-991680__340.jpg" />
        </Slide>
        <Slide index={1}>
          <Image style={{maxHeight: 500}} src="https://cdn.pixabay.com/photo/2015/10/16/19/18/balloon-991680__340.jpg" />
        </Slide>
        <Slide index={2}>
          <Image style={{ maxHeight: 500}} src="https://cdn.pixabay.com/photo/2015/10/16/19/18/balloon-991680__340.jpg" />
        </Slide>
        <Slide index={3}>
          <Image style={{ maxHeight: 500}} src="https://cdn.pixabay.com/photo/2015/10/16/19/18/balloon-991680__340.jpg" />
        </Slide>
        <Slide index={4}>
          <Image style={{ maxHeight: 500}} src="https://cdn.pixabay.com/photo/2015/10/16/19/18/balloon-991680__340.jpg" />
        </Slide>
        <Slide index={5}>
          <Image style={{ maxHeight: 500}}src="https://cdn.pixabay.com/photo/2015/10/16/19/18/balloon-991680__340.jpg" />
        </Slide>
      </Slider>
      <Container className="containerButtons">
      <ButtonBack className="buttonBack">Back</ButtonBack>
      <ButtonNext className="buttonNext">Next</ButtonNext>
      </Container>
    </div>
    <DotGroup className="dotGroup" />
  </CarouselProvider>

CSS：

.slider{
  max-height: 500px;
}
.dotGroup {
  text-align: center;
}

.innterClass {
  height: 500px !important;
}
.containerButtons {
  width: 100%;
  background: darkcyan;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.root{
  height: 100px;
  background: lightgray;
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: center;
}

.buttonBack,.buttonNext {
  color: white;
  background: red;
}

图片：
enter image description here

我基本上以为

声明主容器为相对容器

和按钮容器作为绝对可以解决，但是没有用

Answer 1

您可以根据需要进行修改。

.containerButtons {
  background: darkcyan;
  display: flex;
  justify-content: space-between;
}
.buttonBack,.buttonNext {
  color: red;
}

<div class="containerButtons">
    <button class="buttonBack">Back</button>
    <button class="buttonNext">Next</button>
 </div>

如果要向左和向右箭头居中。

.root{
    height: 100px;
    background: lightgray;
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
}
.containerButtons {
  width: 100%;
  background: darkcyan;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.buttonBack,.buttonNext {
  color: white;
  background: red;
}

<div class="root">
<div class="containerButtons">
    <div class="buttonBack">Back</div>
    <div class="buttonNext">Next</div>
 </div>
</div>