反应箭头位置/ 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

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

要将按钮推到边缘，可以使用flex属性。

.containerButtons{
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

请参见下面的演示作为示例。

.container {
  position: relative;
  height: 500px;
  background-color: hotpink;
}

.containerButtons {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

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

Answer 2

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

.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>