宽度,CSS填充剩余宽度"/>
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
更多推荐
css 占据剩余行宽度,CSS填充剩余宽度
发布评论