Question

我想为我的网站设计一个响应式搜索框，所以当我发现这个编码器小提琴 - http://codepen.io/nikhil/pen/GuAho时，我摆弄它并最终得到这个版本 - http://codepen.io/anon/pen/Qygrpe

<!-- 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像素或更低，即使有足够的空间，我的搜索框也会分解并且不会浮动在右侧。我甚至删除了菜单的几个部分，只留下了＃34; BLOGGER＆＃34;和音乐＆＃34;仍然搜索框突破了div。

请指出我出错的地方，我确定我在CSS的某个地方走错了方向。提前谢谢。

Answer 1

try to add this solution:

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

Answer 2

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;

尝试给出位置：绝对

CSS3搜索框响应，搜索按钮分手

2 个答案: