使用响应式设计进行搜索...宽度100％？

Question

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

这就是我提出的： https://jsfiddle.net/wfbchc1y/

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

Jsfiddle

Answer 2

尝试在主容器上使用display flex。

＆＃13;

＆＃13;

(r"/(.*)",tornado.web.StaticFileHandler,{"path":"/home/alex/one/static"})

＆＃13;

.mainBox{
	max-width: 800px;
	box-sizing: border-box;
	border: solid 1px #D5D4D4;
	background-color: #FFF;
	margin:0 auto;
	padding:20px;
        display: flex;
        

}
#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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

希望这个解决了！

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

请尝试以下代码。

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

#btnSearch{
    width: 100%;
	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">
  <table width="100%">
     <tr>
         <td><input type="text" name="peticion" placeholder="Search" id="txtSearch"></td>
         <td width="5px">&nbsp;</td>
         <td width="75px"><input type="button" value=">" id="btnSearch"></td>
     </tr>
  </table>
 </div>