Question

问题是尽管我付出了努力，但菜单并没有改变成320px的垂直菜单。然而，尽管有这些尝试，我还是无法弄清楚这个问题发生的原因或原因。这是带有css和html代码的JSFiddle，你会看到文本正在环绕，假设它是垂直分层的。

此外，在旁注上，请告诉我是否有任何不起作用或文本中有些内容不清楚，因为阅读障碍有时可以做到这一点。

这是CSS：

body {
    padding: 0;
    margin: 0;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #604E9F;
}
nav li {
    float: left;
}
nav li a {
    display: block;
    color: White;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
nav li a:hover {
    background-color: #4E4083;
}
nav .clearfix {
    overflow: auto;
}
@media (max-width 320px) {
    .col-12 {
        display: block;
    }
    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 100%;
        overflow: hidden;
        background-color: #604E9F;
    }
    nav li {
        float: left;
    }
    nav li a {
        display: block;
        color: White;
        text-align: left;
        padding: 8px 0px 8px 16px;
        text-decoration: none;
    }
    nav li a:hover {
        background-color: #4E4083;
    }
    nav .clearfix {
        overflow: auto;
    }
}

Answer 1

添加

@media screen and (max-width: 320px) {
    nav li {
        display: block;
        width: 100%;
    }
}

Answer 2

看看这个，我已经更新了你的JS小提琴，但没有完全风格，它没有比这更容易。

@media screen and (min-width : 280px)  {


nav ul {
transition:1s;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;

这是代码中最重要的部分。

这里是链接

https://jsfiddle.net/083e9nz4/16/

无法使导航栏垂直显示

2 个答案: