Flex/SCSS实现图片集底部上/下一页按钮左右对齐问题求助

Hey there! Let's get that pagination layout sorted out for you. The main issues with your current code are misplaced SCSS selectors and missing key flex properties on the parent container. Here's a step-by-step fix:

Step 1: Correct Your SCSS Structure & Flex Properties #

Your original SCSS had nested selector errors and wasn't using the right flex alignment on the parent container. Here's the revised code:

.item-pagination-prevnext {
  display: flex;
  justify-content: space-between; // This is the key to push items left/right
  background-color: grey;
  padding: 10vw 2rem; // Added horizontal padding to avoid edge crowding
  align-items: center; // Ensures buttons stay vertically centered in the container

  .item-pagination-link {
    display: flex;
    align-items: center; // Vertically centers icon and text
    gap: 0.5rem; // Adds clean space between icon and text (adjust as needed)
    cursor: pointer;
    text-decoration: none; // Remove default link underline if needed

    .item-pagination-icon {
      padding: 0 25px;
    }
  }

  .item-pagination-link-next {
    color: red; // Keep your desired red color for the next button
  }
}

Key Changes Explained: #

• justify-content: space-between on .item-pagination-prevnext: This tells the flex container to push the prev button to the left edge and the next button to the right edge—exactly the alignment you want.
• Fixed selector nesting: Your original code had .item-pagination-link-next nested inside .item-pagination-link, which meant the styles weren't being applied correctly. Now it's a direct child of the parent container.
• Simplified link styling: We removed unnecessary justify-content rules from individual links because the parent container handles overall alignment. Instead, we focus on centering icon and text vertically with align-items: center.
• Added horizontal padding: Prevents buttons from touching the edges of the grey container for a cleaner look.

Step 2: Verify Your HTML Structure #

Your existing HTML is already correct, but here it is again to confirm it matches the revised SCSS:

<div class="item-pagination-prevnext">
  <!-- Prev Button -->
  <a class="item-pagination-link item-pagination-link-prev" href="#">
    <div class="item-pagination-icon">
      <i class="fas fa-arrow-left"></i>
    </div>
    <div class="pagination-title-wrapper">
      <h4 class="item-pagination-title">Previous</h4>
    </div>
  </a>

  <!-- Next Button -->
  <a class="item-pagination-link item-pagination-link-next" href="#">
    <div class="pagination-title-wrapper">
      <h4 class="item-pagination-title">Next</h4>
    </div>
    <div class="item-pagination-icon">
      <i class="fas fa-arrow-right"></i>
    </div>
  </a>
</div>

Why Your Original Code Didn't Work #

• You were trying to control overall left/right alignment from inside each link instead of leveraging the parent flex container's justify-content property.
• The nested .item-pagination-link-next selector meant your red color and alignment styles weren't targeting the correct element.

With these changes, your prev button will sit flush left, next button flush right, and both will have icons vertically aligned with their text. Tweak padding, gap, or colors to match your design system!

内容的提问来源于stack exchange，提问作者EdmundML