html - 调整文本框的宽度并使移动响应

Question

我正在尝试让我的文本框和按钮看起来响应灵敏，并且即使在我使用手机时也保持行内阻塞。我希望文本框的宽度根据浏览器扩展以使用更多屏幕。 我的 html 看起来像这样:

<div id="wrapper">
         <li class="input-button"> 
           <div style="float:left;">                      
          <input type="text" id="KUNDE" placeholder="Search by name or ID." value="" size="60"/>  
           <div id="loader" style="display:none;"><img src="loader.gif" /></div>            
                                </div>   
              <div style="float:left;margin-left:10px;">              
           <button id="buton" type="button" class="btn-style" value="search" onclick="find();">Hent</button> 
                                </div> 
              </li>        
           </div>

和 css 部分看起来像这样:

body{   
    background: #f5fffa;
    font-family: 'Lora', serif;
    font-family: 'Montserrat', sans-serif;
}
#wrapper {
 max-width: 940px;
  margin:0 auto;
  padding:0;
}
.input-button
{
margin:20px auto;
display:inline-block;
}
#KUNDE{ 
   padding: 10px 5px;
   font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
   border: 1px solid #a4c3ca;
   background: #f1f1f1;
   border-radius: 5px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);  
}
.btn-style {
padding:5px;
border: 1px solid #00748f;
height: 42px;
width: 100px;
cursor: pointer;
font: bold 12px Arial, Helvetica;
border-radius: 5px;      
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
background-color: lightblue;

}

我已经尝试实现 CSS3 flexbox 和 CSS calc()，比如添加 #Kunde { display: flex; } 和 .input-button input { width: calc(100% - 160px); 并从 html 中删除 size="60"并在 CSS 中使用 width 属性，如 #KUNDE{ width=100%; }。这些方法并没有帮助我解决问题，或者我无法以正确的方式使用它们:(

任何建议将不胜感激。

Answer 1

尝试以下操作。在必要的地方使用 cal() 和 width: 100% 来实现这一点

body {
  background: #f5fffa;
  font-family: 'Lora', serif;
  font-family: 'Montserrat', sans-serif;
}
#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0;
}
.input-button {
  display: inline-block;
  width: 100%;
}
.input-wrapper {
  width: calc(100% - 140px)
}
#KUNDE {
  padding: 10px 5px;
  font: bold 16px'lucida sans', 'trebuchet MS', 'Tahoma';
  border: 1px solid #a4c3ca;
  background: #f1f1f1;
  border-radius: 5px;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
.btn-style {
  margin: 0 10px;
  padding: 5px;
  border: 1px solid #00748f;
  height: 42px;
  width: 100px;
  cursor: pointer;
  font: bold 12px Arial, Helvetica;
  border-radius: 5px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
  background-color: lightblue;
}

<div id="wrapper">
  <li class="input-button">
    <div class="input-wrapper" style="float:left;">
      <input type="text" id="KUNDE" placeholder="Search by name or ID." value="" />
      <div id="loader" style="display:none;">
        <img src="loader.gif" />
      </div>
    </div>
    <div style="float:left;margin-left:10px;">
      <button id="buton" type="button" class="btn-style" value="search" onclick="find();">Hent</button>
    </div>
  </li>
</div>