Question

因此，我在一个页面上列出了很多类，并且在每个标题的下方都有一个图标（图像），说明该类是什么类型。在桌面上，我将其设置为在标题下显示中心。在移动设备上，我希望做同样的事情。但是，当我使用margin-left：auto和margin-right：auto将其在移动设备中居中时，它停留在侧面。如果我使用margin-left：40px将其推过，它会移动，但在桌面上也会推开。如果我转到桌面媒体查询并在左边距设置为0，则它将在桌面和移动设备的边距都更改为0。

这是CSS：

.classicons1 {
    margin-left: 45%;
    padding: 5px;
    width: 10%;
    display: inline;
}
@media screen and (min-width: 880px) {
.classicons1 {
    width: 7%;
    padding: 5px;
    display: inline;
    margin-left: 0;
}
}

媒体查询中的所有其他元素都起作用，除了这一元素和我创建的任何新元素。在Chrome上以检查模式打开它时，我看到移动元素被划掉了，被桌面元素覆盖了。

Answer 1

我发现您的CSS不正确的地方如下：

您的媒体查询不正确，如果要使其用于移动设备，则应使用：

@media (max-width: 768px) {/*css code here*/}
我发现将事物居中于父母宽度的最佳方法是：

margin: 0 auto; display: table/block;
最后，如果要测试元素是否在任何方面都被覆盖，有两种方法可以避免这种情况。使用style属性将CSS与html内联，或使用以下代码：

property: property-value !important !important为其赋予了优先级，请尽量不要将其用作您的解决方案，而仅将!important用作调试方法。应该把它当作万不得已的方法。

*注意：如果您发现使用检错元素（调试控制台）在chrome中删除了代码，则很可能使用其他属性覆盖CSS，无论这些属性来自内嵌html CSS还是来自其他类影响您要编辑的课程。调试代码时请记住这一点。

移动媒体查询被桌面值覆盖了吗？

1 个答案: