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/