html - 带按钮的响应式全宽输入

Question

我这里有 fiddle :https://jsfiddle.net/ufLpqdtj/

我的问题是试图让我的搜索框和按钮在页面上始终保持全宽，而不管它在什么设备上运行。

在 Javascript 中，我总是可以使文本框的宽度为 100% 减去按钮的像素宽度(按钮的大小始终相同)，但我觉得我好像遗漏了什么，而且它可以在 CSS 中本地完成。

有什么想法或建议吗？

#commonSearchContainer {
  display: block;
  clear: both;
  width: 100%;
  position: relative;
}
#commonSearchTerm {
  width: 100%;
  margin: 25px 0px 0px 0px;
  padding: 5px;
  border: 1px solid #999999;
  height: 35px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.common-search-term-wrapper {
  width: 90%;
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.common-search-button {
  background-color: #E9700D;
  border: 1px solid #ccc;
  display: inline-block;
  margin: 25px 0px 0px 10px;
  width: 80px;
  color: #fff;
  padding: 7px;
  font-style: italic;
  cursor: pointer;
}

<div id="searchSection" class="common-search-section">
  <div class="common-search-term-wrapper">
    <input id="commonSearchTerm" type="text" autocomplete="off" class="common-search-term">
  </div>
  <div id="commonSearchSubmit" class="common-search-button">
    Search
    <div style="clear: both;"></div>
  </div>
</div>

Answer 1

对于这种布局，我通常做的是在元素周围创建一个父容器(就像你有的那样)并给它 position: relative 和 width: 100% .

然后我在内部元素上使用 position: absolute 和 display: inline-block。设置固定大小元素的宽度，并使用 left 或 right 定位所有元素。

在您的情况下，它将是这样的:https://jsfiddle.net/ufLpqdtj/1/