html - 使用响应式设计搜索...宽度 100%？

Question

我正在尝试设计一个响应式设计的搜索引擎，但当窗口长度减小时，我的搜索按钮和文本框出现问题。我不知道我是否可以帮助我。我希望文本框和按钮一起占据我容器的 100%

这是我想出的: https://jsfiddle.net/wfbchc1y/

.mainBox{
	max-width: 800px;
	box-sizing: border-box;
	border: solid 1px #D5D4D4;
	background-color: #FFF;
	margin:0 auto;
	padding:20px;
}
#txtSearch{
	height: 40px;
	margin-right: 10px;
	border: solid 1px #CBCBCB;
	border-radius: 4px;
	outline: none;
	box-sizing: border-box;
	padding: 10px;
	color: #6D6A6A;
	width: 92%;
	float: left;
}

#btnSearch{
	box-sizing: border-box;
	height: 40px;
	padding: 10px 15px;
	border-radius: 4px;
	outline:none;
	cursor:pointer;
	transition:All .5s ease;
	border:solid 1px #000;
	background-color:#009;
	color:white;
}

 <div class="mainBox">
  <input type="text" name="peticion" placeholder="Search" id="txtSearch">
  <input type="button" value=">" id="btnSearch">
 </div>

Answer 1

您可以使用 css calc计算输入的宽度。

width: calc(92% - 40px);//92% - width of input

Jsfiddle