Поле поиска и кнопка не отображаются в одной строке

Question

У меня есть окно поиска Woocommerce на моей странице, и я хочу, чтобы кнопка и само окно поиска отображались в одной строке. Я попытался использовать атрибут 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 ;
}

Здесь - ссылка на саму страницу.

Answer 1

Пожалуйста, используйте код ниже для реализации встроенной формы для всех браузеров.

<style>
.form-inline{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
}
</style>

<form class="form-inline">
  <input type="text" name="name" placeholder="Name">
  <button type="submit">Submit</button>
</form>

Answer 2

Поле ввода поиска внутри формы имеет ширину: 100%. Измените ширину на 50%.

Answer 3

Просто попробуйте добавить

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

где-то в конце последнего добавленного файла CSS

Answer 4

Попробуйте добавить правило !important к этому стилю или стилизовать input и button. Обратите внимание, что правило !important следует использовать только в качестве крайней меры, поскольку его нельзя переопределить. Вместо этого вы должны переопределить стили, используя упорядочение ваших стилей (в этом случае убедитесь, что ваш собственный CSS включен после CSS WooCommerce) и используя специфичность. Вот как бы вы стилизовали input и button:

form.woocommerce-product-search input,
form.woocommerce-product-search button
{
    display: inline-block !important;
}