我不想在小屏幕上隐藏的附加导航栏的 HTML 代码。
<nav id="subnav" class="navbar navbar-expand-md navbar-default bg-light
text-uppercase custom-nav">
<ul class="navbar-nav ml-auto">
<li>
<a class="nav-link" href="#">Language Equality</a>
</li>
<li>
<a class="nav-link" href="#">articles</a>
</li>
<li>
<a class="nav-link" href="#">help</a>
</li>
<li>
<a class="nav-link" href="#">download</a>
</li>
</ul>
</nav>
这是我的CSS
@media screen and (max-width: 460px) {
#subnav li{
color: red !important;
font-size: 15px;
list-style: none !important;
text-align: center !important;
display: inline-block !important;
}
}
最佳答案
所以如果我在这里看到这个，你喜欢有一个带有列表样式的普通列表用于更大的显示器和宽度更小的显示器然后 460 像素你喜欢根本没有列表样式并将它们也放在行。
对于这个结果，我使用了这个 HTML 代码:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Navigation</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav id="subnav" class="navbar navbar-expand-md navbar-default bg-light
text-uppercase custom-nav">
<ul class="navbar-nav ml-auto">
<li>
<a class="nav-link" href="#">Language Equality</a>
</li>
<li>
<a class="nav-link" href="#">articles</a>
</li>
<li>
<a class="nav-link" href="#">help</a>
</li>
<li>
<a class="nav-link" href="#">download</a>
</li>
</ul>
</nav>
</body>
</html>
和这个 CSS 代码:
@media screen and (max-width: 460px) {
#subnav li{
color: red !important;
font-size: 15px;
list-style: none !important;
text-align: center !important;
display: inline-block !important;
}
}
This is a picture of the style wenn the display is smaller then 460px
它应该可以正常工作。我觉得你只是拼错了一些东西。让我知道它是否有效(对我来说有效)。
关于css - 辅助导航栏元素在较小的媒体屏幕上显示列表样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49504862/