搜索框和按钮不在同一行中显示
搜索框和按钮不在同一行中显示
提问于 2019-01-18 02:48:59
我有一个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是指向页面本身的链接。
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-01-18 04:02:56
只需尝试添加
[id^="woocommerce-product-search-field"] {
width: auto !important;
}在最后添加的css文件末尾的某处
Stack Overflow用户
发布于 2019-01-18 02:55:24
尝试将!important规则添加到此样式或设置input和button的样式。请注意，!important规则只能作为最后的手段使用，因为它不能被覆盖。相反，您应该使用样式的排序来覆盖样式(在这种情况下，请确保您的自定义WooCommerce包含在CSS之后)，并使用专用性。这就是您设置input和button样式的方式
form.woocommerce-product-search input,
form.woocommerce-product-search button
{
display: inline-block !important;
}Stack Overflow用户
发布于 2019-01-18 12:56:44
请使用下面的代码来实现所有浏览器的内联表单。
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54242427
复制相关文章
相似问题
腾讯云开发者
