Html 调整窗口大小时输入类型文本框不折叠

我已经在下面的提琴中给出了我的标题部分…我不能给出整个代码，因为它太大了

但问题只是头

当我调整浏览器窗口的大小时，输入类型框的大小保持不变；我希望输入框的宽度随视口宽度的变化而变化

html

你想做什么就做什么？这个问题有点不清楚。我将整个搜索div添加到HTML中的

.newmenu

。然后，我将其设置为内联块，并添加负边距以抵消列表项的边距

HTML

---

实际上，您的HTML代码存在一些错误。现在，

input

和

img

标签应该是自动关闭的，如下所示：

<img alt="" src="" />
<input type="" onclick="" />

我已经使用您的代码尝试过了，添加了一个全新的

css

类，并将其分配到

input

框：

HTML

---

我在你的代码中没有看到任何会导致输入宽度改变的内容。这正是我要寻找的。当浏览器大小最小化时，元素需要调整大小。我将尝试你的逻辑，并让你在明天发布。谢谢……当你测试我的逻辑时，请务必记住，您可以根据需要调整

minwidth

和

max width

css属性。我知道这可能看起来很明显，但总是小事：）

.rounded {
    background-color: #fff;
    border-radius: 7px 0px 0px 7px;
    -moz-border-radius: 7px 0px 0px 7px;
    -webkit-border-radius: 7px 0px 0px 7px;
    -moz-box-shadow: 3px 3px 6px #51575e;
    -webkit-box-shadow: 3px 3px 6px #51575e;
    box-shadow: 3px 3px 6px #51575e;
}

.newmenu {
    float: right;
    z-index: 3000;
    min-height: 40px;
    margin-top: 20px;
    font-family: 'Helvetica Neue', Helvetica, arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    text-align: right;
    margin-right: 5px;
}

.newmenu ul {
    list-style: none;
}

.newmenu li {
    display: inline;
    text-decoration: none;
    margin-left: 12px;
}

<div class="newmenu">
   <ul>
     <li id="searchItem">
       <div id="mainsearch">
          <div id="mainsearchbutton" class="searchtitle"> SEARCH:</div>
          <div id="searchbox">
            <input id="small_search_string" name="search_string"
              type="text" class="newsearch rounded" placeholder="Search..."
              maxlength="500" />
            <input type="button" id="searchButton1" class="searchButton"
              title="Click here to search the database"
              onclick="performSearch();" />
         </div>
       </div>
     </li>
 <li id="datalink"><a href="#">LIB</a></li>
...

#mainsearch {
  display:inline-block;
  margin-top:-20px;
  margin-left:-12px;
}

<img alt="" src="" />
<input type="" onclick="" />

width: 30%
min-width: 50px;
max-width: 200px;

    <div class="col-md-3 col-xs-5 logo">
        <img alt="Prices Paid Portal" src="theme/img/pp_logo_beta_lg.png" width="312" height="36" align="left"/> 
    </div>

    <!-- move these links to the right-->
    <div class="newmenu">
        <ul>
            <li id="datalink"><a href="#">LIB</a></li>
            <li id="helplink"><a href="./SearchHelp">HELP</a></li>
            <li id="FeedbackLink"><a href="#">FEEDBACK</a></li>
            <li id="logoutLink"><a href="#">LOGOUT</a></li>
        </ul>
    </div>

    <div id="mainsearch">
        <div id="mainsearchbutton" class="searchtitle"> 
            SEARCH:
        </div>
        <div id="searchbox">
            <input id="small_search_string" name="search_string" type="text" class="newsearch rounded resizeSearchBar" placeholder="Search..." maxlength="500" >
            <input type="button" id="searchButton1" class="searchButton" title="Click here to search the database" onclick="performSearch();" />
        </div>
    </div>

</div>

.resizeSearchBar {
    width: 30%;
    min-width: 50px;
    max-width: 200px;
}

.rounded {
    background-color: #fff;
    border-radius: 7px 0px 0px 7px;
    -moz-border-radius: 7px 0px 0px 7px;
    -webkit-border-radius: 7px 0px 0px 7px;
    -moz-box-shadow: 3px 3px 6px #51575e;
    -webkit-box-shadow: 3px 3px 6px #51575e;
    box-shadow: 3px 3px 6px #51575e;
}

.newmenu {
    float: right;
    z-index: 3000;
    min-height: 40px;
    margin-top: 20px;
    font-family: 'Helvetica Neue', Helvetica, arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    text-align: right;
    margin-right: 5px;
}

.newmenu ul {
    list-style: none;
}

.newmenu li {
    display: inline;
    text-decoration: none;
    margin-left: 12px;
}