<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
标签 css
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
问题是尽管我做了很多努力，但菜单并没有将其自身更改为 320 像素的垂直菜单。但是，尽管进行了这些尝试，我还是无法弄清楚为什么会出现此问题或出现此问题的位置。这是 JSFiddle使用 css 和 html 代码，您会在其中看到文本环绕，就像假设垂直分层一样。
此外，在旁注中让我知道是否有任何问题或文本中的内容不清楚，因为阅读障碍有时会造成这种情况。
这是 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;
}
}
最佳答案
添加
@media screen and (max-width: 320px) {
nav li {
display: block;
width: 100%;
}
}
关于css - 无法让导航栏垂直显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35047916/