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示例 Here

下面的代码段示例

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>

媒体查询显示：无

2 个答案: