以下是您的问题的答案.我会留下旧的替代品.
问题
In CSS 2.2,the effect of ‘min-width’ and ‘max-width’ on tables,inline tables,table cells,table columns,and column groups is undefined.
所以似乎目前没有办法向表格单元格添加最大宽度.您可以在容器的每一侧添加一个表格单元格,并使用媒体查询为容器设置1500px的宽度,但这不是首选,因为有一种解决方法.
一个办法
如果你想限制link到1500px中提供的导航的宽度,你可以像你一样添加一个容器,但块结构应该有点不同.
现在你有:
>横幅作为一张桌子
>容器作为表格单元格
> header_branding和nav_primary作为单元格内的块
考虑将结构改为以下:
>横幅到一个街区
>容器到表
> header_branding和nav_primary到表格单元格
横幅只是100%宽的背景元素.
然后像容量一样给容器一个最大宽度为1500px,但也记得给它100%的宽度.另外它不会尝试扩展到屏幕的整个宽度,因为它不必,但现在最大宽度将是一个限制因素.
Here是here提供的CodePen示例,但是容器将宽度限制为1500px.
您的示例已修改:
.banner {
width: 100%;
}
.container {
max-width: 1500px;
width: 100%;
height: 160px;
margin: auto;
overflow: hidden;
display: table;
}
.header_branding,.nav_primary {
vertical-align: middle;
display: table-cell;
}
.header_branding {
width: 150px;
height: 52px;
}
.nav_primary {
text-align: right;
}
/* To make edges visible for the demo */
.banner,.container,.header_branding,.nav_primary {
background: rgba(0,0.3);
border: 1px dotted red;
}
[Menu items]