如何将搜索栏放置在分页选择器旁？（附代码及截图）

Hey there! Let's get your search bar positioned right next to the pagination dropdown, matching your desired layout. Here's how to adjust your code and add some CSS to make it work:

Step 1: Adjust the HTML Structure #

First, we'll reorder the elements so the search bar sits right beside the pagination dropdown. We'll move the search form div to come right before the dropdown select element. Here's the modified code:

<div class="wpf-navi <?php echo esc_attr($class) ?>">
  <div class="wpf-navi-wrap">
    <span class="wpf-page-info">
      <?php wpforo_phrase('Page') ?> <?php echo intval($paged) ?> / <?php echo intval($pages_count) ?>
    </span>
    <?php if( $paged - 1 > 0 ): $prev_url = ( ($paged - 1) == 1 ? $sanitized_current_url : sprintf($url, $paged - 1) ); ?>
    <a href="<?php echo esc_url( WPF()->user_trailingslashit($prev_url) ) ?>" class="wpf-prev-button" rel="prev">
      <i class="fas fa-chevron-left fa-sx"></i> <?php wpforo_phrase('prev') ?>
    </a>
    <?php endif ?>
    <!-- Moved search bar here, right before the dropdown -->
    <div id="wpf-widget-search" class="wpforo-widget-wrap">
      <form action="<?php echo wpforo_home_url() ?>" method="get">
        <?php wpforo_make_hidden_fields_from_url( wpforo_home_url() ) ?>
        <input type="text" placeholder="<?php wpforo_phrase('Search...') ?>" name="wpfs" class="wpf-search-input" value="<?php echo isset($_GET['wpfs']) ? esc_attr(sanitize_text_field($_GET['wpfs'])) : '' ?>" >
        <input type="submit" class="wpf-search-submit" value="&raquo;">
      </form>
    </div>
    <select class="wpf-navi-dropdown" onchange="if (this.value) window.location.assign(this.value)" title="<?php esc_attr( wpforo_phrase('Select Page') ) ?>">
      <option value="<?php echo esc_url( WPF()->user_trailingslashit($sanitized_current_url) ) ?>" <?php wpfo_check($paged, 1, 'selected') ?>>1</option>
      <?php for($i = 2; $i <= $pages_count; $i++) : ?>
      <option value="<?php echo esc_url( WPF()->user_trailingslashit( sprintf($url, $i) ) ) ?>" <?php wpfo_check($paged, $i, 'selected') ?>>
        <?php echo $i ?>
      </option>
      <?php endfor; ?>
    </select>
    <?php if( $paged + 1 <= $pages_count ): ?>
    <a href="<?php echo esc_url( WPF()->user_trailingslashit(sprintf($url, $paged + 1) ) ) ?>" class="wpf-next-button" rel="next">
      <?php wpforo_phrase('next') ?> <i class="fas fa-chevron-right fa-sx"></i>
    </a>
    <?php endif ?>
  </div>
</div>

Step 2: Add CSS for Layout Alignment #

Next, we'll use flexbox to make sure all elements in the navigation bar align horizontally, and adjust the search bar's sizing so it fits nicely with the dropdown. Add this CSS to your theme's stylesheet or custom CSS area:

.wpf-navi-wrap {
  display: flex;
  align-items: center;
  gap: 10px; /* Adjust spacing between elements as needed */
  flex-wrap: wrap; /* Allows elements to wrap on smaller screens */
}

#wpf-widget-search form {
  display: flex;
  gap: 5px;
}

.wpf-search-input {
  width: 150px; /* Adjust this width to fit your design */
  padding: 4px 8px;
}

.wpf-search-submit {
  padding: 4px 12px;
}

/* Optional: Adjust page info spacing if needed */
.wpf-page-info {
  margin-right: 10px;
}

Key Changes Explained: #

• Reordered Elements: Moved the search bar div to sit immediately before the pagination dropdown, so they're adjacent in the HTML structure.
• Flexbox Layout: Set .wpf-navi-wrap to use flexbox, which lets elements line up horizontally and align vertically centered.
• Adjusted Search Bar Sizing: Replaced the old wpfw-70 and wpfw-20 classes with fixed-width styles (or you could use flex properties) to prevent the search bar from taking too much space.
• Spacing: Added gap properties to control the space between elements for a clean look.

This should get your search bar right next to the pagination dropdown, matching your desired layout. If you need to tweak spacing or sizing further, just adjust the CSS values to fit your site's design!

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