css - 在 wordpress 中并排对齐这些元素

Question

我使用 Divi Theme Builder 在 wordpress 中下载了一个名为 WP Hotel Booking 的插件。

这是他在我网站上的实际设计:

我怎样才能像这样并排对齐这些元素？

我想问题是因为它是一个 wordpress 主题，而我没有创建那个主题，我只能使用 css 来尝试进行这些更改。

如果需要尝试使用控制台，这是实际的网站:http://198.199.66.183/ (是的，还没有域名)这些是 css 类:

.hb_input_date_check {
/* arrival/departure date*/
}
.entry-content .hotel-booking-search select {
/* adults/children */
}
.entry-content .hotel-booking-search form button {
/* the button */
}

有人可以帮帮我吗？谢谢!

Answer 1

试一试:

在相应网站的自定义样式中，将这些样式添加到表单的父包装器中。我已经使用您当前的代码和主题对此进行了测试，它似乎有效:

.hb-form-table {
    display: flex;
    justify-content: space-between;
}

这样做的目的是确保元素在一个灵活的容器中，不允许它们进入下一行。将需要一些额外的 CSS 来确保输入字段都具有相同的填充和高度。如果您是 flex-box 的新手，这里有一份关于如何使用它的完整指南，以及它的所有属性:https://css-tricks.com/snippets/css/a-guide-to-flexbox/