CSS填充剩余宽度 [英] CSS fill remaining width
问题描述
我有这个标题栏。
<div id="header">
<div class="container">
<img src="img/logo.png"/>
<div id="searchBar">
<input type="text" />
</div>
<div class="buttonsHolder">
<div class="button orange inline" id="myAccount">
My Account
</div>
<div class="button red inline" id="basket">
Basket (2)
</div>
</div>
</div>
</div>
我需要searchBar来填充div中剩余的空格。我将如何做到这一点?
I need the searchBar to fill whatever the remaining gap is in the div. How would I do this?
这是我的CSS
#header {
background-color: #323C3E;
width:100%;
}
.button {
padding:22px;
}
.orange {
background-color: #FF5A0B;
}
.red {
background-color: #FF0000;
}
.inline {
display:inline;
}
#searchBar {
background-color: #FFF2BC;
}
推荐答案
CSS表格单元格。
稍微修改HTML如下:
Modify your HTML slightly as follows:
<div id="header">
<div class="container">
<div class="logoBar">
<img src="http://placehold.it/50x40" />
</div>
<div id="searchBar">
<input type="text" />
</div>
<div class="button orange" id="myAccount">My Account</div>
<div class="button red" id="basket">Basket (2)</div>
</div>
</div>
只需删除两个 .button
元素。
应用以下CSS:
#header {
background-color: #323C3E;
width:100%;
}
.container {
display: table;
width: 100%;
}
.logoBar, #searchBar, .button {
display: table-cell;
vertical-align: middle;
width: auto;
}
.logoBar img {
display: block;
}
#searchBar {
background-color: #FFF2BC;
width: 90%;
padding: 0 50px 0 10px;
}
#searchBar input {
width: 100%;
}
.button {
white-space: nowrap;
padding:22px;
}
应用 display:table
.container
并赋予其100%宽度。
Apply display: table
to .container
and give it 100% width.
.logoBar
,
#searchBar
, .button
,应用 display:table-cell
。
对于 #searchBar
,将宽度设置为90%所有其他元素来计算缩小到适合的宽度,并且搜索栏将扩展以填充剩余空间。
For the #searchBar
, set the width to 90%, which force all the other elements to compute a shrink-to-fit width and the search bar will expand to fill in the rest of the space.
使用text-align和vertical-
Use text-align and vertical-align in the table cells as needed.
查看演示: http:// jsfiddle.net/audetwebdesign/zWXQt/
这篇关于CSS填充剩余宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!