html - 我无法将 display: none 应用于 ul

问题描述

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

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;
            }
        }

标签： htmlcssdisplay

html - 我无法将 display: none 应用于 ul

问题描述

解决方案

推荐阅读