html 如何是宽度填充,CSS填充剩余宽度

您可以使用CSS表格单元格实现此布局。

稍微修改您的HTML，如下所示：

My Account

Basket (2)

只需移除两个#searchBar元素周围的包装元素即可。

应用以下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;

}

将#searchBar应用到#searchBar，并使其宽度为100％。

对于#searchBar、#searchBar、.button，适用display: table-cell。

对于#searchBar，将宽度设置为90％，这将强制所有其他元素计算出缩小以适合的宽度，搜索栏将展开以填充其余空间。

根据需要在表格单元格中使用文本对齐和垂直对齐。

参见演示：[http://jsfiddle.net/audetwebdesign/zWXQt/]