我在做這個網(wǎng)頁(我是CSS的初學者)，我想知道是否有人能幫我把按鈕放到藍色盒子的旁邊

.btn-prev, .btn-next {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.7);
    display: inline-block;
    border: none;
    line-height: 40px;
    margin: 0 auto;
    top: 30%;
    z-index: 2;
    font-size: 30px;
    font-weight: bold;
    border-radius: 50%;
    font-family: monospace;
    cursor: pointer;
  }
  
  .btn-prev:hover, .btn-next:hover {
    background: rgb(238, 236, 236);
  }
  
  .btn-prev {
    left: 10% auto;
    right: 80%;
    margin: 0 auto;
    text-align: center;
    border: none;
    
  }
  
  .btn-next {
    right: 10% auto;
    left: 80%;
    margin: 0 auto;
    text-align: center;
    border: none;
  }

正如你們所看到的，這有點亂，因為我在瞎搞，我不想搞砸(正如我說的，我是一個乞丐)，需要一些幫助

這是它的樣子 在此輸入圖像描述 我希望按鈕在藍色框的旁邊，并在中間居中，不要彎曲，因為它會破壞位置，因為我希望它移到窗口的旁邊，幫助 在此輸入圖像描述 這是我(理論上)想要的樣子，不用多說，謝謝

編輯: 我會添加html給你們看

<section>
    <div id="btn-prev" class="btn-prev">&#60;</div>
    <div id="btn-next" class="btn-next">&#62;</div>
    <div class="center_part">
      <div class="zoom">
   </div><br><br>
    <button class="button btnleer">Leer</button>
  </div>
  </section>

我沒有放所有的html，只放了按鈕所在的部分

我對HTML一無所知，但我想這可能會有所幫助

給定主div(帶有藍色背景顏色的div)的相對位置和按鈕的絕對位置，可以根據(jù)需要相應地改變按鈕的左右位置。

.btn-prev, .btn-next {
        position:absolute;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.7);
        display: inline-block;
        border: none;
        line-height: 40px;
        margin: 0 auto;
        top: 30%;
        z-index: 2;
        font-size: 30px;
        font-weight: bold;
        border-radius: 50%;
        font-family: monospace;
        cursor: pointer;
      }
      
      .btn-prev:hover, .btn-next:hover {
        background: rgb(238, 236, 236);
      }
      
      .btn-prev {
        left: 10% auto;
        right: 100%;
        margin: 0 auto;
        text-align: center;
        border: none;
        
      }
      
      .btn-next {
        right: 10% auto;
        left: 100%;
        margin: 0 auto;
        text-align: center;
        border: none;
      }

只需使用flex將您的內(nèi)容排成一行。你必須在HTML中移動一個按鈕。但是你會得到你想要的效果。比使用position absolute要好得多，后者需要包含更多的包裝元素。

section {
  display: flex;
  flex-direction: row;
}

<section>
  <div id="btn-prev" class="btn-prev">&#60;</div>
  <div class="center_part">
    <div class="zoom"></div>
    <br><br>
    <button class="button btnleer">Leer</button>
  </div>
  <div id="btn-next" class="btn-next">&#62;</div>
</section>

據(jù)我所知，如果你想讓html元素按水平方向排序，你可以使用flex容器和flex項目。嘗試在谷歌上搜索FlexBox。