html - 搜索输入折叠

Question

我在要创建的博客中有一个搜索输入。我正在努力使博客具有响应性，因此我希望在用户调整浏览器大小时所有内容都折叠成特定大小。实际上，我侧边栏中输入的搜索表单没有折叠，而是溢出了 aside 和 div。下面是我到目前为止的代码。在做出响应方面我缺少什么？

 <div class="gridContainer clearfix">

 <!--HEADER--> 
<div id="LayoutDiv1">
        <div align="center">
          <!--NAVIGAIION + LOGO-->
  </div>
        <nav>
            <div class="header">

                     <div id="toplogo top" align="center"><a class="logo" href="#"></a>      </div>

<hr>    


                    <div align="center">
                      <!--navigation list items-->
                     <ul id="topmargin" class="navigation scaling">
          <li class="scaling"><a href="#"></a><img class= "invert"      src="home.png" width="160px" height="55px"></li>
          <li class="scaling"><a href="#"></a><img class="invert" src="about.png"></li>
          <li class="scaling"><a href="#"></a><img class="invert" src="contact.png"></li>
          <li class="scaling"><a href="#"></a><img class="invert" src="work.png"></li>
        </ul>

                      <hr>

                    </div>
            </div>
        </nav>
        <div align="center">
          <!--end of NAVIGATION + LOGO-->


  </div>
  <div id="LayoutDiv2" class="clearfix">

        <div id="content">            <p>This is the Content efnoifnegnrorfnoewnfdksncldncksdjcndlscnkdsncldksnclnsdl
          </p>   
        </div>


        <aside>

            <div id="sidebar">

              <div id="sidebar-content">

                <p> This is the Sidebar</p>

        <form  class=action="" id="search-form" method="get">

                <input type="text" value="search"   onblur="if(this.value=='')this.value='search'" onfocus="if(this.value=='search')this.value=''"/>

                <input type="hidden" value="submit"/>

          </form>

              </div>

          </div>

        </aside>






 </div><!--end of LayoutDiv2-->



   <div id="LayoutDiv3">
   <hr>

             <footer><!--beginning of FOOTER-->


                    <div class="footer">
                            <p>PETER</p>
                    </div>



 </footer> <!-- end of FOOTER-->

  </div>



   </div><!--end of LayoutDiv1-->





 </div>
 <p>&nbsp;</p>
 <!--end of Grid Container, HEADER, CONTENT, FOOTER-->


 And here is my CSS:

 img, object, embed, video {
max-width: 100%;
 }

 .ie6 img {
width:100%;
 }

 #topmargin{
margin-top: 5px;
margin-bottom: 5px;
 }

 form{
 padding:5px;
 word-wrap:break-word;

 }

 .logo{
background: url(PLUM%20monogram1.png);
display: block;
height: 100px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
text-align: center;
transition: all 500ms linear 0s;
width: 56px;
z-index: 2;
margin-top:5px;
}

 .logo:hover{
background-image: url(PLUM%20monogram2.png);
transition: all 300ms linear 0s;
margin-top:5px;

}

 #toplogo{
display:inline-block;
margin-top:10px;
height:100px;
}

 .navigation{
clear: both;
margin-left: auto;
margin-right: auto;
/* [disabled]list-style: none; */
padding: 0px;
-webkit-flex-flow: row wrap;
justify-content: center;
font-size: 1.4em;
letter-spacing: 1px;
overflow: hidden;
padding-bottom: 10px;
text-align: center;
width: 100%;
display:inline;
}

 li{
 display: inline;
 list-style-type: none;
}

 .scaling{
 min-width:25%;
 display:inline block;

 }

 .invert{
 }

 .invert:hover{
-webkit-filter: invert(100%);
transition: all 100ms linear 0s;


 }


 /* Mobile Layout: 480px and below. */

 .gridContainer {
margin-left: auto;
margin-right: auto;
width: 87.36%;
padding-left: 1.82%;
padding-right: 1.82%;
word-wrap:break-word;

 }
 #LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
 }

 #LayoutDiv2 {
 clear: both;
 float: left;
 margin-left: 0;
 width: 100%;
 display: block;
 }

 p{
 padding:5px;
 }


 body, html {
 height: 100%;
 padding:1px;
 }

 #content{
 display:inline-block;
 float:left;
 width:80%;
 background:#F36;
 height:100%;

 }

 #sidebar{
display: inline-block;
background:#0FC;
float: left;
width: 20%;

word-wrap:break-word;
 }

 #sidebar-content{
 padding:5px;
 overflow:hidden;
word-wrap:break-word;

 }




 .search-input{
 width:70%;
  }

 .footer{
 background:#00F;
 }

 #LayoutDiv3{
 clear: both;
 float: left;
 margin-left: 0;
 width: 100%;
 display: block;
 }

 @media (max-width: 480px) {

gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
word-wrap:break-word;

 }
  #LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
 }


 #LayoutDiv2 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
 }
#LayoutDiv3{ clear: both;  float: left;  margin-left: 0;  width: 100%;  display: block;      }


#sidebar{ clear: both; width: 100%; }
#content{ clear: both; width: 100%; }
 }




 /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

  @media only screen and (min-width: 481px) {
 .gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
word-wrap:break-word;

}


  #LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
 }


  #LayoutDiv2 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
 }

 #LayoutDiv3 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
 }





 /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and  Tablet Layout. */

 @media only screen and (min-width: 769px) {
 .gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
 }
 #LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
 }
 #LayoutDiv2 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
 }

 #LayoutDiv3 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
 }


 }

我知道这可能需要看很多东西，但如果有人能帮我让它尽可能地响应，我将不胜感激。

Answer 1

将类 .search-input 设置为您的搜索文本框。

<input type="text" 
                                       value="search" onblur="if(this.value=='')this.value='search'" onfocus="if(this.value=='search')this.value=''"
                                       class="search-input" />

编辑:添加了 JSFiddle http://jsfiddle.net/P6sr2/