Question

其他导航栏的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;
    }
}

Answer 1

所以，如果我在这里看到这一点，你希望有一个列表样式的普通列表用于更大的显示器和更宽的宽度然后460 px的显示器你想要没有列表样式并且它们也放在一个线。

对于这个结果，我使用了这个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

关闭工作。我觉得你错了什么东西。让我知道它是否有效（对我而言）。

辅助导航栏项目在较小的媒体屏幕上显示列表样式

1 个答案: