Question

我正在尝试使我的侧边栏流畅，所以它随浏览器窗口调整，一切似乎都很好，除了添加媒体查询，我的CSS样式中断，但当我采取查询它从我的样式表回到了规范造型。有人可以看看我的代码并告诉我我做错了什么吗？提前谢谢！

顺便说一句，当我将第二个结束花括号添加到#rightandoverview媒体查询时，样式会回到它应该的方式，但流动性不起作用。会是什么呢？

#righthandoverview {
position: absolute;
top: 91px;
right: 0px;
width: 20%;
height:215px;
background-color: white;
webkit-box-shadow: 0px 4px 5px -5px #777;
-moz-box-shadow: 0px 4px 5px -5px #777;
box-shadow: 0px 4px 5px -5px #777;
}

@media screen and (max-width:830px) and (min-width:100px) {
#righthandoverview {
    float: left;
    width: 30%;
    background-color: yellow;
    margin-top: 5px;

}





#righthandoverview ul {
position: absolute;
display: inline;
float: left;
font-family: klavika-light;
list-style-type: none;
text-decoration: none;
white-space: nowrap;
}

@media screen and (max-width:830px) and (min-width:100px) {
#righthandoverview ul {
    float:left;
    width:30%;
    background-color: yellow;
    margin-top: 10px;

}
}




#righthandoverview ul li > a {
display: inline;
text-decoration: none;
color:#8BAFDA;
}   

#righthandoverview ul li {
padding-bottom: 6px;
}

Answer 1

您似乎缺少一个括号来结束您的第一个媒体查询

@media screen and (max-width:830px) and (min-width:100px) {
#righthandoverview {
    float: left;
    width: 30%;
    background-color: yellow;
    margin-top: 5px;

}





#righthandoverview ul {
position: absolute;
display: inline;
float: left;
font-family: klavika-light;
list-style-type: none;
text-decoration: none;
white-space: nowrap;
}
}

Answer 2

你错过了以下代码中的括号，我添加了它。

 @media screen and (max-width:830px) and (min-width:100px) {
        #righthandoverview {
            float: left;
            width: 30%;
            background-color: yellow;
            margin-top: 5px;

        }
    }

为什么我的CSS媒体查询打破了样式？

2 个答案: