CSS 响应式顶部栏输入

Question

我要制作顶栏
貌似google玩！ https://play.google.com/store
http://i.stack.imgur.com/tdLVz.png

但我无法使灵活的输入框适合 window 大小....
Div.search 的最小宽度是 250px 但不起作用.. 求助！

*{
 box-sizing: border-box;
}
.topbar{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 min-width: 900px;
 height: 60px;
 background-color: #FFFFFF;
 border-bottom: 1px solid #C7C7C7;
}
.menu{
 position: absolute;
 top: 15px;
 left: 30px;
 width: 30px;
 heigth: 30px;
 background-color: #777777;
}
.logo{
 position: absolute;
 top: 10px;
 left: 70px;
 width: 100px;
 height: 40px;
 background-color: #80DF5F;
}
.search{
 flex: 0 2 auto;
 position: relative;
 margin: 15px 0px 0px 200px;
 padding-right: 50px;
 min-width: 250px;
 width: 700px;
 height: 30px;
 background-color: #2A77FF;
}
.search input{
 display: block;
 width: 100%;
}
.btn{
 position: absolute;
 top: 0;
 right: 0;
 width: 50px;
 height: 30px;
 background-color: #FF3B3B;
}
.chat{
 position: absolute;
 top: 15px;
 right: 20px;
 width: 100px;
 height: 30px;
 background-color: #FFC536;
}

<div class="topbar">
 <div class="menu">=</div>
    <div class="logo">Logo</div>
    <div class="search">
     <input type="text">
     <div class="btn">button</div>
    </div>
    <div class="chat">C</div>
</div>

Answer 1

添加其他元素的所有宽度（及其水平位置）并使用calc设置div .search宽度： width: calc(100% - 380px);

现代浏览器 (IE9+) 的解决方案

*{
 box-sizing: border-box;
}
.topbar{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 min-width: 900px;
 height: 60px;
 background-color: #FFFFFF;
 border-bottom: 1px solid #C7C7C7;
}
.menu{
 position: absolute;
 top: 15px;
 left: 30px;
 width: 30px;
 heigth: 30px;
 background-color: #777777;
}
.logo{
 position: absolute;
 top: 10px;
 left: 70px;
 width: 100px;
 height: 40px;
 background-color: #80DF5F;
}
.search{
 flex: 0 2 auto;
 position: relative;
 margin: 15px 0px 0px 200px;
 padding-right: 50px;
 min-width: 250px;
 width: calc(100% - 380px);
 height: 30px;
 background-color: #2A77FF;
}
.search input{
 display: block;
 width: 100%;
}
.btn{
 position: absolute;
 top: 0;
 right: 0;
 width: 50px;
 height: 30px;
 background-color: #FF3B3B;
}
.chat{
 position: absolute;
 top: 15px;
 right: 20px;
 width: 100px;
 height: 30px;
 background-color: #FFC536;
}

<div class="topbar">
 <div class="menu">=</div>
    <div class="logo">Logo</div>
    <div class="search">
     <input type="text">
     <div class="btn">button</div>
    </div>
    <div class="chat">C</div>
</div>

针对旧浏览器(<=IE8)的解决方案：

*{
 box-sizing: border-box;
}
.topbar{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 min-width: 900px;
 height: 60px;
 background-color: #FFFFFF;
 border-bottom: 1px solid #C7C7C7;
}
.menu{
 position: absolute;
 top: 15px;
 left: 30px;
 width: 30px;
 heigth: 30px;
 background-color: #777777;
}
.logo{
 position: absolute;
 top: 10px;
 left: 70px;
 width: 100px;
 height: 40px;
 background-color: #80DF5F;
}
.search-wrapper {
 min-width: 250px;
 padding-left: 200px;
 padding-right: 170px;
 width: 100%;
 position: relative;
 margin: 15px 0px 0px 0px;
}
.search{
 position: relative;
 width: 100%;
 padding-right: 50px;
 height: 30px;
 background-color: #2A77FF;
}
.search input{
 display: block;
 width: 100%;
}
.btn{
 position: absolute;
 top: 0;
 right: 0;
 width: 50px;
 height: 30px;
 background-color: #FF3B3B;
}
.chat{
 position: absolute;
 top: 15px;
 right: 20px;
 width: 100px;
 height: 30px;
 background-color: #FFC536;
}

<div class="topbar">
 <div class="menu">=</div>
    <div class="logo">Logo</div>
    <div class="search-wrapper">
  <div class="search">
   <input type="text">
   <div class="btn">button</div>
  </div>
 </div>
    <div class="chat">C</div>
</div>

CSS 响应式顶部栏输入

CSS Responsive Top-Bar Input

css

flexbox