CSS响应顶栏输入

Question

我想做顶杆 看起来像谷歌玩！ https://play.google.com/store
http://i.stack.imgur.com/tdLVz.png

但是我不能使灵活的输入框适合窗口大小....
Div.search的最小宽度为250px但不起作用.. 帮助！

＆＃13;

＆＃13;

*{
	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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>

旧浏览器的解决方案（＆lt; = 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>