搜索輸入摺疊

Question

我在我正在尋找的博客中有一個搜索輸入。我正在努力使博客響應，因此我希望在用戶調整瀏覽器大小時將所有內容都摺疊爲特定大小。實際上，我的邊欄中的搜索表單輸入不會崩潰，並且會從旁邊和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

將class .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/