标签标签不可见答案

【问题标题】：Label tag not visible标签标签不可见
【发布时间】：2022-01-28 04:55:03
【问题描述】：

嘿，最近我正在创建在 html 文件中包含此代码的导航栏

<!DOCTYPE html>
<html lang="en">
<head>
                <meta charset="UTF-8">
                <title>Page title</title>
                <link rel="stylesheet" href="css.css"></link>
                <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
                <script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"></script>
</head>
<body>
                <nav>
                                <h1>&nbsp;<a href="css.html" class="title">Logo</a></h1>
                                      <span class="menu-btn">
                                                    <input type="checkbox" id="check">
      <label for="check">
        <i class="fas fa-bars"></i>
      </label>
                                      </span>
                                <div class="nav-links">
                                                <a href="#"class="active">Item 1</a>&nbsp;&nbsp;
                                                <a href="#">Item 2</a>&nbsp;&nbsp;
                                                <a href="#">Item 3</a>&nbsp;&nbsp;
                                                <a href="#">Item 4</a>&nbsp;&nbsp;
                                </div>
                </nav>
</body>
</html>

这是 CSS 代码

* {
     margin: 0;
     padding: 0;
}
body {
     margin: 0;
     padding: 0;
}
nav {
                background: black;
                color: white;
                height: 76px !important;
                line-height: 76px;
                color: white;
}
a {
                color: white;
                text-decoration: none;
}
.menu-btn{
                display: none;
}
@media(max-width: 600px){
                .nav-links{
                                display: none;
                }
                .menu-btn{
                                display: inline;
                }
}
@media(min-width: 600px){
                nav {
                                display: flex;
                                justify-content: space-between;
                }
                .nav-links a {
                                transition: .2s ease-in-out;
                                font-size: 20px;
                                padding: 7px 13px;
                }
                .nav-links a:hover, .nav-links .active{
                                background: white;
                                color: black;
                                border-radius: 12px;
                }
}

问题是标签不可见。请快点告诉我一些事情。是的，现在你会说我让它不显示，所以在媒体查询中说不显示。请不要复制我的代码。⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

【问题讨论】：

And please don't copy my code?
"请快点告诉我。" 请参阅Under what circumstances may I add "urgent" or other similar phrases to my question, in order to obtain faster answers?
"请不要复制我的代码" 这里的贡献是根据知识共享下的不可撤销许可发布的，它允许共享和修改此处发布的代码。不幸的是，您包含此声明不会影响该许可。 More info
问好问题是解决问题的开始。

标签： html css

【解决方案1】：

标签被包裹在一个类名为menu-btn的跨度中。

但在menu-btn 规则集中的CSS 中有display:none;。

尝试在menu-btn 中删除display:none。

* {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
}

nav {
    background: black;
    color: white;
    height: 76px !important;
    line-height: 76px;
    color: white;
}

a {
    color: white;
    text-decoration: none;
}

.menu-btn {
   
}

@media(max-width: 600px) {
    .nav-links {
        display: none;
    }

    .menu-btn {
        display: inline;
    }
}

@media(min-width: 600px) {
    nav {
        display: flex;
        justify-content: space-between;
    }

    .nav-links a {
        transition: .2s ease-in-out;
        font-size: 20px;
        padding: 7px 13px;
    }

    .nav-links a:hover,
    .nav-links .active {
        background: white;
        color: black;
        border-radius: 12px;
    }
}

<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">
    <title>Page title</title>
    <link rel="stylesheet" href="css.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"></script>

</head>

<body>
    <nav>
        <h1>&nbsp;<a href="css.html" class="title">Logo</a></h1>
        <span class="menu-btn">
            <input type="checkbox" id="check">
            <label for="check" style="width:30px;">
                <i class="fas fa-bars"></i>
            </label>
        </span>
        <div class="nav-links">
            <a href="#" class="active">Item 1</a>&nbsp;&nbsp;
            <a href="#">Item 2</a>&nbsp;&nbsp;
            <a href="#">Item 3</a>&nbsp;&nbsp;
            <a href="#">Item 4</a>&nbsp;&nbsp;
        </div>
    </nav>
</body>

</html>

【讨论】：

在媒体查询中写成 display: inline;