使文本框使用剩余空间

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会有所帮助。

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

#s{
  margin-right:80px;
  }

#b{
  float: right;
  width:70px;
  }

#sb{
  width: 100%;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;