如何在WordPress中让WP Hotel Booking插件元素横向并排对齐

Hey there! I took a look at your site, and the issue where WP Hotel Booking’s elements (like arrival/departure date pickers) aren’t aligning horizontally is totally fixable with some custom CSS—perfect since you’re using Divi Theme Builder without custom theme code.

Here’s how to get it sorted:

1. Add Custom CSS in Divi #

Head over to Divi > Theme Options > General > Custom CSS (or use the page-specific CSS in Divi Builder if you only want this change on certain pages).

2. Target the Date Input Containers #

Use the .hb_input_date_check class you mentioned to force horizontal alignment with flexbox. Here’s the code to paste:

/* Align WP Hotel Booking date pickers horizontally */
.hb_input_date_check {
    display: flex;
    gap: 15px; /* Adjust this number to change spacing between elements */
    align-items: center;
    flex-wrap: wrap; /* Makes elements stack on small screens for responsiveness */
}

/* Ensure each input group takes equal space (adjust as needed) */
.hb_input_date_check .hb-form-group {
    flex: 1;
    min-width: 200px; /* Prevents inputs from shrinking too much on mobile */
}

/* Make date inputs fill their containers */
.hb_input_date_check input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

3. Extend to Other Booking Elements (if needed) #

If you have other elements like guest selectors that also need horizontal alignment, target their parent container (e.g., .hb-booking-form if that’s the class) with similar flex styles:

/* Align entire booking form elements horizontally */
.hb-booking-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

4. Test Responsiveness #

After adding the CSS, check mobile views—flex-wrap: wrap ensures elements stack vertically when there’s not enough space, so your booking form stays user-friendly on phones.

This should make those date pickers and related elements line up horizontally exactly as you want. If any elements still look off, tweak the flex value or min-width to adjust their sizing to fit your layout better.

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