当屏幕低于 x px 时，我的 css 命令将部分菜单更改为新行，这有什么问题吗？

Question

我想在屏幕宽度较低时更改菜单，以在自己的行中显示每个菜单链接，但当我使用它时，它在一行中仍然相同。 然后 menu.jinja 在另一个 .jinja 站点中使用，其中链接到 style.css。我的 css 命令有什么问题吗？

样式.css

    @media (max-width: 1000px) {
    .menu ul li {
        margin-right: 20px;
        padding: 10px; 
        display: block;  //main function
        
    }
}

菜单.jinja

<div class="header">
        <div class="menu">
            <ul>
                {% if 'role_idone' in session and session['role_idone'] == 1 %}
                    <li><a href="{{ url_for('user_manage.user_manage"
                {% endif %}
               <li><a href="property_manage.jinja">Property manage</a></li>
               <li><a href="building_manage.jinja">Building manage</a></li>
         
            </ul>
        </div>
    </div>

Answer 1

我会写：

.menu ul li {
    margin-right: 20px;
    padding: 10px; 
    display: inline-block;  //main function
}

否则，您可以浏览浏览器开发工具箱中的“显示”选项列表，然后选择最方便的“显示”选项。