如何在搜索按钮保持在同一行的情况下使搜索框具体化？

Question

在我的示例中，按钮显示在向下。

<form id="search-site"  action='search' method='get'>
<div class="input-field">
<input id="search" type="search" name='q'>
<label class="label-icon" for="search"><i class="material-icons" >search</i></label></div>
<button type="submit">search</button>
</form>

Answer 1

试试此代码 HTML

<div class="container">
<form id="search-site"  action='search' method='get'>
  <div class="input-group">
<div class="input-field">
<input id="search" type="search" name='q'>
<label class="label-icon" for="search">
  <i class="material-icons" >search</i>
 </label>
</div>
<button type="submit" class="input-group-addon btn">search</button>
</div>

</form>
  </div>

CSS

.input-group{
  display:table;
  width:100%;
}
.input-group .input-field,
.input-group .input-group-addon{
  display:table-cell;
}

希望这会有所帮助..