媒体查询显示：无

Question

我叫Jeffrey，我刚开始创建网站。 现在，由于我是一个新手，我对HTML / CSS的了解很少，但是我对媒体查询的了解却几乎为零，我希望有人可以帮助我，因为我似乎无法自己解决这个问题。 。

我有一个带有徽标和文本菜单的div。 当我也尝试为移动设备构建此网站时，我想删除徽标并仅显示菜单。 问题是菜单不会居中，我的容器太小了...

 body{margin:0;font-family:'Titillium Web';} a:hover{color:#60a642;} a{color:#000;text-decoration:none;} @media screen and (max-width:1155px) { #containerlogomenu {width:60% !important;} #logo {padding:0px; margin-left:auto; margin-right:auto;} } @media screen and (max-width:761px) { #containerlogomenu {width:100%; padding:0px;} #logo {display:none;padding:0px; margin-left:auto; margin-right:auto;} #menu {width:100%;} } #top{ width:100%; height:140px; background-color:#f2f2f2;} #containerlogomenu{ padding:20px; width:40%;} #logo{ float:left; padding-left:50px; padding-right:50px; width:60px; height:100px; background-color:#F00; background-repeat:no-repeat;} #menu{ font-weight:600; font-size:19px; text-align:left; line-height:110px; width:65%; float:right; color:#000;} 

 <div id="top" align="center"> <div id="containerlogomenu" align="center"> <div id="logo"></div> <div id="menu"> <a href="#">HOME</a> | <a href="#step1">STEP 1</a> | <a href="#step2">STEP 2</a> | <a href="#step3">STEP 3</a></div> </div> </div> 

我希望有人能够帮助我！ 无论如何，非常感谢您的时间和事先的努力！

Answer 1

您必须将媒体查询放在所有其他CSS规则之下，否则它们将被常规规则覆盖。

Answer 2

尝试这个

这里的 JsFiddle示例

下面的代码段示例

 body{margin:0;font-family:'Titillium Web';} a:hover{color:#60a642;} a{color:#000;text-decoration:none;} @media screen and (max-width:1155px) { #containerlogomenu {width:60% !important;} #logo {padding:0px; margin-left:auto; margin-right:auto;} } @media screen and (max-width:761px) { #containerlogomenu {width:100% !important; padding:0px;} #logo {display:none;padding:0px; margin-left:auto; margin-right:auto;} #menu {width:100%} .HomeLink { display:none; } } #top{ width:100%; height:140px; background-color:#f2f2f2;} #containerlogomenu{ padding:20px; width:40%;} #logo{ float:left; padding-left:50px; padding-right:50px; width:60px; height:100px; background-color:#F00; background-repeat:no-repeat;} #menu{ font-weight:600; font-size:19px; line-height:110px; width:100%; margin:0 auto; color:#000;} 

 <div id="top" align="center"> <div id="containerlogomenu" align="center"> <div id="logo"></div> <div id="menu"> <a href="#" class="HomeLink">HOME</a> | <a href="#step1">STEP 1</a> | <a href="#step2">STEP 2</a> | <a href="#step3">STEP 3</a></div> </div> </div>