CSS3搜索框響應，搜索按鈕分手

我想設計一個負責任的搜索框爲我的網站，所以當我發現這個codepen小提琴 - http://codepen.io/nikhil/pen/GuAho，我與它擺弄左右，結束了這個版本 - http://codepen.io/anon/pen/Qygrpe CSS3搜索框響應，搜索按鈕分手

<!-- language: lang-css --> 

    /* CSS Search */ 

     .cf:before, .cf:after{ 
      content:""; 
      display:table; 
     } 

     .cf:after{ 
      clear:both; 
     } 

     .cf{ 
      zoom:1; 
     } 

     /*-------------------------------------*/ 

     .content-wrapper { 
      width: 180px; 
      padding: 0px; 
      position:relative; 
      -moz-border-radius: 4px; 
      -webkit-border-radius: 4px; 
      border-radius: 4px; 

     } 

    #search { 
     position:relative; 
     font-size:13px;font-family:"Dosis"; 
     float:right; 
     margin-top:7px; 
     right:5px; 
    } 
    #search-form { 
     background-color:#314d5b; 
     height:32px; 
     line-height:32px; 
     border:0 none; 
     font-family:"Dosis"; 
     font-size:13px; 
     font-weight:200; 
     color:#b5c5ca; 
     width:130px; 
     -moz-border-radius: 4px 0 0 4px; 
      -webkit-border-radius: 4px 0 0 4px; 
      border-radius: 4px 0 0 4px;  
     box-shadow:inset 0 0 1px 0 rgba(0,0,0,0.2); 
     padding:0 10px; 
     transition:all 0.5s ease 0s; 
    } 
    #search-form .search-button,#search-form .search-button:hover{ 
     transition:all 0.5s ease 0s; 
     height:21px; 
     width:21px; 
     line-height:30px; 
     background-color:#ed0b77; 
     border:0 none; 
     float:right; 
     cursor:pointer; 
     outline:none; 
    } 
    #search-form:hover{ 
     background-color:#f0f0f0; 
    } 
    #search-form:focus{ 
     background-color:#eee; 
     text-shadow:none !important; 
     outline:none; 
     color:#459bb6; 
    } 
    #box {display:none} 
    .search-text { 
     font-size:13px; 
     font-family:"Dosis"; 
     float:right; 
     cursor:pointer; 
    } 
    .search-text:hover { 
     color:#459bb6 
    } 


     .content-wrapper button { 
       overflow: visible; 
      position: relative; 
      float: right; 
      border: 0; 
      padding: 0; 
      cursor: pointer; 
      height: 32px; 
      width: 30px; 
      background: #416577; 
      -moz-border-radius: 0 3px 3px 0; 
      -webkit-border-radius: 0 3px 3px 0; 
      border-radius: 0 3px 3px 0;  
      text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3); 
     } 

     .content-wrapper button:hover{  
      background: #e2614c; 
     } 

     .content-wrapper button:active, 
     .content-wrapper button:focus{ 
      background: #c42f2f;  
     } 

     .content-wrapper button:before { 
      content: ''; 
      position: absolute; 
      border-width: 8px 8px 8px 0; 
      border-style: solid solid solid none; 
      border-color: transparent #416577 transparent; 
      top: 8px; 
      left: -5px; 
     } 

     .content-wrapper button:hover:before{ 
      border-right-color: #e2614c; 
     } 

     .content-wrapper button:focus:before{ 
      border-right-color: #c42f2f; 
     }  

     .content-wrapper button::-moz-focus-inner { 
      border: 0; 
      padding: 0; 
     } 


<!-- language: lang-html --> 

    <div id='search'> 
     <div class='content-wrapper cf'> 
      <form action='/search' id='searchform' method='get'> 
    <input id='search-form' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Looking for something?'/> 
      <button class='search-button' title='Search' type='submit'><img alt='search button' src='http://4.bp.blogspot.com/-e8Tp2vSgy2c/VpS0vc8zi7I/AAAAAAAAAN0/6rDw0GIVaSg/s1600/mysearch2.png' title='Search'/> 
    </button> 
    </form> 
    </div> 
    </div>

我將搜索框的HTML代碼以及CSS添加到了我的博客模板中，並且它很好地顯示，直到屏幕寬度超過600像素。看一看

但只要寬度變爲600像素或更低，我的搜索框是分手，而不是浮在右邊，即使有足夠的空間。我甚至刪除我的菜單的幾節只留下「BLOGGER」和樂」仍然在搜索框中被打破的div。

請點我在哪裏，我錯了，我。肯定我在某處CSS去錯誤的方向在此先感謝

來源

2016-01-12 Amit P

http://howaboutmyopinion.blogspot.in/是我已經把它。 –

嘗試添加該解決方案：

.content-wrapper { 
    width: auto; 
} 
#search { 
    position: absolute; // it was relative 
} 
div#menutop { 
    position: relative; 
}

來源

2016-01-12 11:22:09 Gintoki

非常感謝您的回覆。但是，當屏幕尺寸低於600像素時，它仍然分崩離析。 http://i.imgur.com/4l3450h.jpg –

搜索表單div（用於文本輸入）似乎在左邊浮動，儘管現在在按照您的建議進行更改後，搜索按鈕更多現在穩定，漂浮在右邊。 –

只需添加div＃search { width：auto！important; }或者只是刪除媒體查詢寬度：＃＃搜索和＃搜索表單的80％，在這裏工作http://i.imgur.com/HL8UsmO.png – Gintoki

transition:all 0.5s ease 0s; 
 
    height:21px; 
 
    width:21px; 
 
    line-height:30px; 
 
    background-color:#ed0b77; 
 
    border:0 none; 
 
    float:right; 
 
    cursor:pointer; 
 
    outline:none;

儘量給位置：絕對

來源

2016-01-12 11:31:45 Levon

非常感謝Black-smurf，但它仍然分手。 –

CSS3搜索框響應，搜索按鈕分手

回答

相關問題