这让我发疯!我看了一些关于Stackoverflow的问题,发现ID元素的优先级高于类元素(这很高兴知道,但是我感觉这不是我的问题)。这是我苦苦挣扎的NAVIGATION菜单。(我使用最大宽度顺便说一句)
这是我的资产净值的一般CSS:
nav{ float:right; margin-left:2%;}
nav ul{ float:left; list-style:none; width:100%;}
nav ul li{ float:left; margin-left:5px; }
nav a{ display:inline-block; float:left; color:#f0f0f0; text-transform:uppercase;
font-family:TrumpGothicWestRegular; font-size:1.5em; padding: 100px 20px 20px 20px; }
现在,当视口小于1140px时,我希望CSS更改菜单,如下所示:
nav ul li{ float:left;}
nav a{ float:left; display:inline-block; padding: 20px 20px 20px 20px;}
因此,基本上,菜单将以较少的顶部填充向左浮动。
当视口小于800像素时,我希望CSS更改菜单,如下所示:
nav ul li{ float:none;}
nav a{ float:none; padding: 20px 20px 20px 20px;}
如您所见,我只将NAV Float更改为NONE
现在,当我对其进行测试时,一般CSS以及在视口低于1140px时都可以正常工作,但是当我低于800px时,NAV仍会向左浮动!看来是继承了1140px的CSS媒体查询吗?有任何想法吗?
更新:这就是我定义媒体查询的方式