Question

我在下面的小提琴中给出了我的标题部分......我无法将整个代码视为太大了......

但问题只在于标题......

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

HTML

<div id="header">
    <div class="col-md-3 col-xs-5 logo"><img 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" placeholder="Search..." maxlength="500" ><input type="button" id="searchButton1" class="searchButton" title="Click here to search the database" onclick="performSearch();" >

    </div>
    </div>
</div>

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

Answer 1

this fiddle能做你想做的吗？这个问题有点不清楚。我将整个搜索div添加到HTML中的.newmenu。然后我把它作为内联块并添加了负边距来对抗列表项边距。

HTML

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

CSS

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

Answer 2

HTML代码实际上有些问题。现在，input和img标签应该自动关闭，如下所示：

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

继续提出您的问题，我实际上对您提出的问题非常不确定。所以，我回答了一个可能的问题，即如何使input框根据页面本身的大小调整自动更改其大小：最简单，最快捷的方法是将宽度指定为百分比。每次元素的容器执行时，百分比宽度会自动调整大小。为了安全预防措施并防止input框变得太大或太小，我们应该使用min-width和max-width值。

为此，我们会将以下css代码添加到input框所使用的类中（该类不应被其他任何内容使用）：

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

我已经尝试使用您的代码添加了一个全新的css类并将其分配到input框：

HTML

    <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>

CSS

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

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

2 个答案:

HTML

CSS