Html 调整文本框的宽度，使手机响应

我试图让我的文本框和按钮看起来更具响应性，即使在我使用mobilephone时也保持内联块。我希望文本框的宽度根据浏览器进行扩展，以使用更多的屏幕。 我的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>

我尝试过实现CSS3 flexbox和CSS calc（），比如添加

#Kunde{display:flex；}

和

.input按钮input{width:calc（100%-160px）；}

从html中删除size=“60”，并在CSS中使用width属性，如

#KUNDE{width=100%；}

。这些方法无法帮助我解决问题，或者我无法以正确的方式使用它们：(

---

如果您有任何建议，我们将不胜感激。

请尝试以下操作。在必要的位置使用

cal（）

和

width:100%

正文{
背景:#f5fffa；
字体系列：“Lora”，衬线；
字体系列：“蒙特塞拉特”，无衬线；
}
#包装纸{
最大宽度：940px；
保证金：0自动；
填充：0；
}
.输入按钮{
显示：内联块；
宽度：100%；
}
.输入包装器{
宽度：计算（100%-140px）
}
#昆德{
填充：10px 5px；
字体：粗体16px'lucida sans'、'trebuchet MS'、'Tahoma'；
边框：1px实心#a4c3ca；
背景#f1f1；
边界半径：5px；
宽度：100%；
框阴影：0 1px 3px rgba（0,0,0,0.25）插入，0 1px 0 rgba（255,255,1）；
}
.btn风格{
利润率：0.10px；
填充物：5px；
边框：1px实心#00748f；
高度：42px；
宽度：100px；
光标：指针；
字体：粗体12px Arial，Helvetica；
边界半径：5px；
文本阴影：0 1px 0 rgba（0,0,0,3）；
框阴影：0 1px 0 rgba（255，255，255，0.3）插入，0 1px 0#fff；
背景颜色：浅蓝色；
}

亨特

尝试以下操作。在必要的位置使用

cal（）

和

宽度：100%

正文{
背景:#f5fffa；
字体系列：“Lora”，衬线；
字体系列：“蒙特塞拉特”，无衬线；
}
#包装纸{
最大宽度：940px；
保证金：0自动；
填充：0；
}
.输入按钮{
显示：内联块；
宽度：100%；
}
.输入包装器{
宽度：计算（100%-140px）
}
#昆德{
填充：10px 5px；
字体：粗体16px'lucida sans'、'trebuchet MS'、'Tahoma'；
边框：1px实心#a4c3ca；
背景#f1f1；
边界半径：5px；
宽度：100%；
框阴影：0 1px 3px rgba（0,0,0,0.25）插入，0 1px 0 rgba（255,255,1）；
}
.btn风格{
利润率：0.10px；
填充物：5px；
边框：1px实心#00748f；
高度：42px；
宽度：100px；
光标：指针；
字体：粗体12px Arial，Helvetica；
边界半径：5px；
文本阴影：0 1px 0 rgba（0,0,0,3）；
框阴影：0 1px 0 rgba（255，255，255，0.3）插入，0 1px 0#fff；
背景颜色：浅蓝色；
}

亨特

您的html非常混乱，因此我删除了所有不必要的标记：

<div id="wrapper">
  <form name="searchbar">                     
      <input type="text" id="KUNDE" placeholder="Search by name or ID." value=""/>  

      <button id="buton" type="button" class="btn-style" value="search" onclick="find();">Hent</button> 
      <div id="loader" style="display:none;"><img src="loader.gif" /></div>   
  </form>        
</div>

css也可以更干净一点，但我不想弄乱你的风格：）

这就是它的作用：

---

您的html非常混乱，因此我删除了所有不必要的标记：

<div id="wrapper">
  <form name="searchbar">                     
      <input type="text" id="KUNDE" placeholder="Search by name or ID." value=""/>  

      <button id="buton" type="button" class="btn-style" value="search" onclick="find();">Hent</button> 
      <div id="loader" style="display:none;"><img src="loader.gif" /></div>   
  </form>        
</div>

css也可以更干净一点，但我不想弄乱你的风格：）

这就是它的作用：

---

您的问题有很多解决方案。下面我用一些示例代码概述了三个选项。需要进行一些调整，以满足您的特定需求，但应该是微不足道的

*{
框大小：边框框；
}
[id]{
利润率：10px0；
}
输入{
宽度：100%；
右边距：10px；
}
#示例1输入{
/*减去按钮宽度+输入边距*/
宽度：钙（100%-85px）；
}
#示例1按钮{
宽度：75px；
}
#示例2{
左边距：-10px；
右边距：-10px；
溢出：隐藏；/*clearfix*/
}
#示例2分区{
浮动：左；
填充：0 10px；
}
#示例2分区：第n个子项（1）{
宽度：60%；
}
#示例2分区：第n个子（2）{
宽度：40%；
}
#示例2按钮{
宽度：100%；
}
#示例3{
显示器：flex；
证明内容：周围的空间；
}

使用Calc（）浮动-固定大小按钮
固定宽度
使用容器元素约束宽度-百分比大小按钮
百分比宽度
柔性箱
亨特

您的问题有很多解决方案。下面我用一些示例代码概述了三个选项。需要进行一些调整，以满足您的特定需求，但应该是微不足道的

*{
框大小：边框框；
}
[id]{
利润率：10px0；
}
输入{
宽度：100%；
右边距：10px；
}
#示例1输入{
/*减去按钮宽度+输入边距*/
宽度：钙（100%-85px）；
}
#示例1按钮{
宽度：75px；
}
#示例2{
左边距：-10px；
右边距：-10px；
溢出：隐藏；/*clearfix*/
}
#示例2分区{
浮动：左；
填充：0 10px；
}
#示例2分区：第n个子项（1）{
宽度：60%；
}
#示例2分区：第n个子（2）{
宽度：40%；
}
#示例2按钮{
宽度：100%；
}
#示例3{
显示器：flex；
证明内容：周围的空间；
}

使用Calc（）浮动-固定大小按钮
固定宽度
使用容器元素约束宽度-百分比大小按钮
百分比宽度
柔性箱
亨特

并不是说您的标记不正确

应作为和

或

的子元素存在。这并不是因为您有一些不正确的标记

应该作为和

或

的子元素存在。当我禁用搜索框上使用的easy-autocomplete.min.js时，这看起来很棒，效果非常好。我在3小时后发布了这个插件，实际上它覆盖了我的CSS：（现在我正试图编辑这个.js文件，但它看起来几乎不可能。有什么方法可以不编辑.js文件就处理这个问题吗？谢谢。你试过更改链接的.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;
}
form {
  width: 100%;
}
form input {
  width: 79%;
  box-sizing: border-box;
}
form button {
  float: right;
  width: 19%;
  box-sizing: border-box;
}
#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;

  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;

}