html - 使文本框使用剩余空间

Question

是否可以将文本框停靠到按钮上，以便它使用剩余空间(如果可能而不使用绝对定位)？

#s{
  float: left;
  }

#b{
  float: right;
  }

#sb{
  width: 100%;
  }

<fieldset>
  <legend>Search</legend>
  <div class="container">
    <div id="s"><input id="sb" name="search"></input></div>
    <div id="b"><button>search</button> 
   </div>
 </fieldset>

Answer 1

是这样的。使用 flex-box 会有帮助。

* {
  box-sizing: border-box;
}
.container {
  display: flex;
}
#s {
  flex: 1;
}
#sb {
  width: 100%;
}
input::-moz-focus-inner,
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

<fieldset>
  <legend>Search</legend>
  <div class="container">
    <div id="s">
      <input id="sb" name="search">
    </div>
    <div id="b">
      <button>search</button>
    </div>
  </div>
</fieldset>