无法让搜索框拉伸到一定宽度

Question

我正在尝试修改搜索框以使其居中并在浏览器窗口中拉伸直到最大宽度。 我不擅长编码，但我试图修改ccs。现在它在容器中居中，但没有拉伸到最大宽度（比如 400px 左右） containervis 的实际 css：

.jr-form-adv-search-module {
margin: auto;
margin-top:10px;
width:50% ;

}

搜索模块有一个搜索框和一个按钮。

.jrKeywords .jrButton

我希望按钮保持不变，但搜索框（文本输入部分）在我调整窗口大小时拉伸直到达到 400 像素。现在只有容器“.jr-form-adv-search-module”跟随窗口，而 .jrKeywords 保持较小。我尝试了很多组合，但无法拉伸。

Search box

这是搜索栏。要恢复，我希望白色文本输入拉伸到 400 像素，同时搜索按钮和他保持居中。目前只有灰色容器跟随窗口。

这是搜索框代码

<div class="jr-page jrPage jrAdvSearchModule jrRoundedPanel jrForm">

<form class="jr-form-adv-search-module" action="/wp-admin/admin-ajax.php?action=jreviews_ajax" method="post" data-live-search="1" data-live-search-hide="1" data-module-id="jreviewsadvsearchwidget-2">






    <div class="jrFieldDiv jrLeft" style="">

         <input type="text" class="jrKeywords" name="data[keywords]" value="" style="height:37px;">

    </div>



    <div class="jrFieldDiv jrLeft">

        <button class="jr-search jrButton" style="margin:0; font-size:120%; background: #289dcc;color:#ffffff; border-color:#289dcc;">

            <span class="jrIconSearch"></span><span>Search</span>

        </button>

    </div>



    <div class="jrClear"></div>


    <input name="data[contentoptions][]" type="hidden" value="title">

    <input name="data[contentoptions][]" type="hidden" value="introtext">

    <input name="data[contentoptions][]" type="hidden" value="fulltext">


    <input name="data[search_query_type]" type="hidden" value="all">


    <input type="hidden" name="data[controller]" value="search">

    <input type="hidden" name="data[action]" value="_process">

    <input type="hidden" name="data[menu_id]" value="">

    <input type="hidden" name="data[dir]" value="">

    <input type="hidden" name="data[Search][criteria_id]" value="1">

    <input type="hidden" name="data[form_id]" value="JreviewsAdvSearch_jreviewsadvsearchwidget-2">

    <input type="hidden" name="data[module_id]" value="jreviewsadvsearchwidget-2">



        </form>


    <div class="jrClear"></div>


    <input name="data[contentoptions][]" type="hidden" value="title">

    <input name="data[contentoptions][]" type="hidden" value="introtext">

    <input name="data[contentoptions][]" type="hidden" value="fulltext">


    <input name="data[search_query_type]" type="hidden" value="all">


    <input type="hidden" name="data[controller]" value="search">

    <input type="hidden" name="data[action]" value="_process">

    <input type="hidden" name="data[menu_id]" value="">

    <input type="hidden" name="data[dir]" value="">

    <input type="hidden" name="data[Search][criteria_id]" value="1">

    <input type="hidden" name="data[form_id]" value="JreviewsAdvSearch_jreviewsadvsearchwidget-2">

    <input type="hidden" name="data[module_id]" value="jreviewsadvsearchwidget-2">

我正在使用我的 wordpress 主题添加自定义 CSS 来修改搜索框行为。这是我到目前为止添加的内容：

.jr-form-adv-search-module {
margin: auto;
margin-top:10px;
width:50% ;

}

Answer 1

您可以使用max-width 属性。

给输入的父类一个类，比如input-container。您可以使用以下规则：

.input-container {
  max-width: 400px;
  width: 100%;
}

这样，div 将尝试在宽度上填充所有空间，但 il 会在达到最大宽度 400px 时停止增长。当你将页面调整到 400px 以下时，div 将占据 100% 的宽度。

Answer 2

试试下面的代码。

.jr-form-adv-search-module {
    margin: auto;
    margin-top:10px;
    width: 100%;
    display: table;
}