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 ;
}

Here是页面本身的链接。

Answer 1

尝试将!important规则添加到此样式或对input和button进行样式设置。请注意，!important规则只能作为不得已的方法，因为它不能被覆盖。相反，您应该使用样式的顺序（在这种情况下，请确保自定义CSS包含在WooCommerce CSS之后）覆盖样式，并使用特定性。这就是您如何设置input和button的样式：

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

Answer 2

请使用以下代码为所有浏览器实现内联表单。

<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 3

表单内的搜索输入框的宽度为100％。将宽度更改为50％。

Answer 4

只需尝试添加

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

最后添加的CSS文件末尾的某个地方

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

4 个答案: