打破我的媒体查询一些如何

时间:2015-04-27 21:37:15

标签: html css media-queries

[链接] http://ramadaan.rocks/test.html?nocache=1

不知怎的,我打破了我的媒体查询。尝试制作导航,现在当600px以下时,媒体查询似乎无法正常工作。

那么媒体查询在哪里被破坏了?导航太长了吗?列表项太多了?

有任何帮助吗?谢谢,

.nav ul { 
list-style: none; 
background-color: #000; 
text-align: center; 
padding: 0;
margin: 0;

}

.nav li { 
font-family: 'Francois One', sans-serif;
font-size: 20px; 
text-transform: uppercase;
line-height: 40px; 
height: 40px; /* line-height and height set at same value centers the content vertically in the middle */
border-bottom: 1px solid #888; 
color: #fff;

}

.nav a { 
text-decoration: none; 
color: #fff; 
display: block;
transition: .3s background-color;

}

.nav a:hover { 
background-color: #e17143; 

}

.nav a.active { 
background-color: #fff; 
color: #e17143; 
cursor: default; 

}

@media screen and (min-width: 600px) { 
.nav li { 
    width: 120px; 
    border-bottom: none; 
    height: 50px; 
    line-height: 50px; 
    font-size: 14px; 
}

}

.nav li { 
float: left;

}

.nav ul { 
overflow: auto;
width: 600px;
margin: 0 auto;

}

.nav { 
background-color: #444;

}

<div class="nav">
<nav>
    <ul>
        <li><a class="active" href="#">Home</a></li>
            <li><a href="#">What Is Ramadan?</a></li>
            <li><a href="#">How Do I Fast?</a></li>
            <li><a href="#">Who Can Fast?</a></li>
            <li><a href="#">Prophetic Commentary</a></li>
            <li><a href="#">Tarawih Prayer</a></li>
            <li><a href="#">30 Ajza' of Qur'an</a></li>
            <li><a href="#">Commonly Asked Questions</a></li>
            <li><a href="#">Contact</a></li>
    </ul>
</nav>

0 个答案:

没有答案