我正在尝试使用 CSS 表值创建一个响应式菜单，当浏览器尺寸缩小时，该菜单将每个 li 元素以 100% 的宽度放在单独的一行上。无论我怎么做以及我在哪个元素上应用该值，它都不会起作用。我试过将表格、表格行和表格单元格放在不同的元素上，但没有任何乐趣。我放了一个 JSFiddle here显示菜单。但是，如果调整浏览器大小使其变小，您会看到菜单仅通过使行宽度为 100% 来响应 @media 查询，列表项显然每个占 20%。
@media screen and (max-width: 760px){
.nav
{
display : table ;
border-collapse : collapse ;
width : 100% ;
position : relative ;
top : 40px
}
ul.menu
{
list-style : none ;
padding : 0 ;
margin : 0 ;
display : table-row ;
width : 100%
}
ul.menu li > li
{
width : 100% ;
display : table-cell ;
}
}
但是，如果我在没有媒体查询的情况下应用相同的代码，它就会执行我希望它执行的操作。你可以在 JSFiddle here 看到这个这允许 li 元素为 100% 宽度。我花了几个小时来尝试不同的事情，包括过去关于 stackoverflow 的答案。
哦，最后我尝试用或不用空格格式化 html 中的 li 元素我最初键入 html 用于内联 block 菜单显示。我在 HTML 中键入 li 项的方式也没有区别。
最佳答案
我认为您误解了表格的工作原理...
表格单元格沿着每个表格行彼此相邻对齐。
您需要更改 display 属性以阻止 li 使它们彼此下降。
body
{
margin : 0 ;
padding : 0 ;
font : sans-serif ;
height : 100%
}
.header
{
background-color : #006400 ;
width : 100% ;
padding : 0 ;
height : 160px ;
line-height : 160px ;
color : white ;
text-align : center ;
margin-bottom : 0 ;
}
.header h1
{
padding : 0 ;
margin : 0
}
.menuplace
{
background-color : #328332 ;
width : 100% ;
height : 90px ;
margin-top : 0 ;
color : white
}
.nav
{
display : table ;
position : relative ;
border-collapse : collapse ;
top : 40px ;
margin : 0 auto
}
.menu
{
list-style : none ;
padding : 0 ;
margin : 0 ;
display : table-row ;
}
.menu li
{
display : table-cell
}
.menu li a
{
text-decoration : none ;
padding : 15px ;
display : block ;
background-color : #006400 ;
color : white ;
margin : 0
}
@media screen and (max-width: 760px){
.nav
{
display : block ;
width : 100% ;
position : relative ;
top : 40px
}
ul.menu
{
list-style : none ;
padding : 0 ;
margin : 0 ;
display : block ;
width : 100%
}
ul.menu li
{
width : 100% ;
display : block ;
}
}<body>
<div class="header">
<h1>Proper Sound website</h1>
</div>
<div class="menuplace">
<div class="nav">
<ul class="menu">
<li><a href="http://www.w3schools.com">Home</a></li><li>
<a href="http://www.bing.com">Bing</a>
</li><li><a href="http://www.yahoo.com">Yahoo</a>
</li><li><a href="http://www.google.com">Google</a>
</li><li><a href="http://www.w3schools.com/about/default.asp">Contact</a></li>
</ul>
</div>
</div>
</body>关于html - 基于表格的菜单不会响应@media 查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34718101/