html - 搜索框和按钮不在同一行显示

我的页面上有一个Woomerce搜索框，我希望按钮和搜索框本身显示在同一行。我试过使用属性inline-block但似乎不起作用。
源代码：

<div data-id="b273043" class="elementor-element elementor-element-b273043 searchbar elementor-widget elementor-widget-wp-widget-woocommerce_product_search" data-element_type="wp-widget-woocommerce_product_search.default">
                <div class="elementor-widget-container">
            <form role="search" method="get" class="woocommerce-product-search" action="https://www.naotech.com/he/">
    <label class="screen-reader-text" for="woocommerce-product-search-field-0">חיפוש עבור:</label>
    <input type="search" id="woocommerce-product-search-field-0" class="search-field" placeholder="Search Products" value="" name="s" />
    <button type="submit" value="search">search</button>
    <input type="hidden" name="post_type" value="product" />
</form>

我试着添加下面的CSS，但没有成功

form.woocommerce-product-search {
    display: inline-block ;
}

Here是指向页面本身的链接。

最佳答案

试着加上

[id^="woocommerce-product-search-field"] {
  width: auto !important;
}

在最后添加的css文件的末尾

关于html - 搜索框和按钮不在同一行显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54242427/