我无法将 display: none 应用到英国

Question

我不想在移动设备上显示一个 ul 元素（页面上三个元素之一）。我正在尝试将 display: none; 应用于它，但它不起作用。代码不是我的，我只是使用了网上的模板，所以请放轻松，plz

Html部分

<section id="banner" class="major">
                    <div class="inner">
                                <header class="major">
                                    <h1>This the title</h1>
                                </header>
                                <div class="content">
                                      <p> and some text here </p>  
                                    <ul class="actions">
                                        <li><a href="#one" class="button next scrolly">A button</a></li>
                                    </ul> 
                                </div>
                            </div>
</section>

我有什么 CSS

ul.actions {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        cursor: default;
        list-style: none;
        margin-left: -1em;
        padding-left: 0;
    }

        ul.actions li {
            padding: 0 0 0 1em;
            vertical-align: middle;
        }

        ul.actions.special {
            -moz-justify-content: center;
            -webkit-justify-content: center;
            -ms-justify-content: center;
            justify-content: center;
            width: 100%;
            margin-left: 0;
        }

            ul.actions.special li:first-child {
                padding-left: 0;
            }

        ul.actions.stacked {
            -moz-flex-direction: column;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            margin-left: 0;
        }

            ul.actions.stacked li {
                padding: 1.3em 0 0 0;
            }

                ul.actions.stacked li:first-child {
                    padding-top: 0;
                }

        ul.actions.fit {
            width: calc(100% + 1em);
        }

            ul.actions.fit li {
                -moz-flex-grow: 1;
                -webkit-flex-grow: 1;
                -ms-flex-grow: 1;
                flex-grow: 1;
                -moz-flex-shrink: 1;
                -webkit-flex-shrink: 1;
                -ms-flex-shrink: 1;
                flex-shrink: 1;
                width: 100%;
            }

                ul.actions.fit li > * {
                    width: 100%;
                }

            ul.actions.fit.stacked {
                width: 100%;
            }

ul.actions 用于整个页面的不同按钮：我在 html 部分向您展示的一个按钮和另外两个用于填写表格的按钮。所以，我添加了这段代码，但它不起作用

@media screen and (max-width: 480px) {
            #banner .actions  {
                display: none;
            }
        }

Answer 1

代码似乎工作正常，我不确定您在进行一些代码编辑之前是否在提到的浏览器上打开了页面。在这种情况下，清除缓存可能会有所帮助。

Answer 2

该代码工作正常。

如果这在您的网站上无法正常工作似乎有任何其他声明覆盖此声明。

当在样式声明中使用重要规则时，此声明将覆盖任何其他声明。

请将 CSS 规则与 !important 一起使用，并在清除缓存后进行检查。

@media screen and (max-width: 480px) {
            #banner .actions  {
                display: none !important;
            }
        }

Answer 3

您在错误的 CSS 文件中使用了此代码。

请使用正确的方法：

你提到的 URL 有这个 CSS https://html5up.net/uploads/demos/forty/assets/css/main.css

媒体查询@media screen and (max-width: 480px)在此css中被提及。请去那里

请在此媒体查询中使用这段代码

#banner .actions {
 display: none;
}

我无法将 display: none 应用到英国

I cannot apply display: none to ul

html

css

display