css 占据剩余行宽度,CSS填充剩余宽度

小编典典

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

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

My Account

Basket (2)

只需删除两个.button元素周围的wrapper 元素即可。

应用以下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％的宽度。

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

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

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

2020-05-16