在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/