Question

我想将搜索区域扩展到页面的全宽（100％），但仍保留旁边的搜索按钮。无论我如何调整浮点数，当宽度为100％时，搜索按钮都不会出现在输入文本字段旁边。

＆＃13;

<div class="container-inline">
  <h2 class="element-invisible">Search form</h2>
  <div class="form-item form-type-textfield form-item-search-block-form">
    <label class="element-invisible" for="edit-search-block-form--2">Search</label>
    <input title="Enter the terms you wish to search for." type="search" id="edit-search-block-form--2" name="search_block_form" value="" size="15" maxlength="128" class="form-text">
  </div>
  <div class="form-actions form-wrapper" id="edit-actions">
    <input type="submit" id="edit-submit" name="op" value="Search" class="form-submit">
  </div>
  <input type="hidden" name="form_build_id" value="form-4z8ikoOcVIhJ_RSkgpUyI989ZS6XhJQN4VRPZbs3Apw">
  <input type="hidden" name="form_token" value="AmbnEOBFHg5XAQV2KWD4hH_O1Y3aQYwS8tLycR_vCZs">
  <input type="hidden" name="form_id" value="search_block_form">
</div>

＆＃13;

Answer 1

几乎没有不同的方法...... label，search和button拥有自己的容器（divs）。

在这个示例中，我再添加一个div，某些容器用于那些3，而display使用table（用于容器）和table-cell（对于那些3个div。）。

＆＃13;

.container
{
    display:table;
    width:100%;
}

.divLabel, .divSearch, #edit-actions
{
display:table-cell;
}
.divSearch {width:100%; padding-left:3px; padding-right:3px;}
#edit-search-block-form--2 {width:100%; box-sizing:border-box;}

＆＃13;

<div class="container-inline">
  <h2 class="element-invisible">Search form</h2>
  <div class="container">
   <div class="divLabel">
    <label class="element-invisible" for="edit-search-block-form--2">Search</label>
    </div>
    <div class="divSearch">
    <input title="Enter the terms you wish to search for." type="search" id="edit-search-block-form--2" name="search_block_form" value="" size="15" maxlength="128" class="form-text">
  </div>
  <div class="form-actions form-wrapper" id="edit-actions">
    <input type="submit" id="edit-submit" name="op" value="Search" class="form-submit">
  </div>
        </div>
  <input type="hidden" name="form_build_id" value="form-4z8ikoOcVIhJ_RSkgpUyI989ZS6XhJQN4VRPZbs3Apw">
  <input type="hidden" name="form_token" value="AmbnEOBFHg5XAQV2KWD4hH_O1Y3aQYwS8tLycR_vCZs">
  <input type="hidden" name="form_id" value="search_block_form">
</div>

＆＃13;

我希望这就是你所需要的。

搜索表单将文本区域扩展为100％并调整搜索按钮以显示在其旁边

1 个答案: