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

【问题标题】：Search box and button don't display in the same line搜索框和按钮不在同一行显示
【发布时间】：2019-01-18 12:56:43
【问题描述】：

我的页面上有一个 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 是指向页面本身的链接。

【问题讨论】：

尝试在最后添加的css文件末尾添加[id^="woocommerce-product-search-field"] {width: auto !important}。
谢谢！工作得很好。
看下面。我已将其发布为答案

标签： html css wordpress woocommerce

【解决方案1】：

尝试添加

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

最后添加的 css 文件末尾的某处

【讨论】：

【解决方案2】：

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

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

【讨论】：

通常也可以将body 或其他一些父元素添加到选择器中。 !important 修饰符给了我荨麻疹。
我也是！是的，很好的建议，在前面加上body 会使选择器更加具体并给予它更高的优先级:)

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：