Question

我正在尝试使用CSS表值创建一个响应式菜单，当浏览器缩小时，将每个li项放在100％宽度的单独行上。无论我如何做，以及我应用价值的元素，它都行不通。我已经尝试将表格，表格行和表格单元格放在不同的元素上，但没有快乐。我已经放了一个显示菜单的JSFiddle here。但是，如果重新调整浏览器的大小以使其变小，您将看到菜单仅响应@media查询，仅使行100％宽度，列表项显然占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。我如何在HTML中输入li项也没什么区别。

Answer 1

我认为你误解了桌子是如何工作的......

表格单元格沿着每个表格行彼此相邻排列。

您需要更改显示属性以阻止它们落在彼此之下。

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>

基于表格的菜单不会响应@media查询

1 个答案: