Question

我在以下代码中将标签元素显示设置为none时遇到问题。由于一些奇怪的原因，当我添加行display: none时，没有任何反应。这是我的代码：

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body { height: 100%; }

body {
  font-family: 'Arvo', serif;
}

h1 {
  margin-top: 110px;
  font-size: 2.5em;
  text-align: center;
}

nav {
  position: fixed;
  top: 0;
  padding: 21px;
  width: 100%;
  background: #5ABCB9;
}

nav h2 {
  display: inline;
}

.menu {
  position: relative;
  margin-top: 6px;
  float: right;
  list-style-type: none;
  z-index: 1;
}

.menu li {
  display: inline;
  margin-right: 15px;
}

p {
  margin: 35px 100px;
  font-size: 20px;
}

.first-letter {
  float: left;
  padding-right: 10px;
  font-size: 80px;
  line-height: 0.9;
  color: #63E2C6;
}

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

nav label {
  position: absolute;
  display: none;
  top: 0;
  right: 0;
  display: block;
  height: 70px;
  width: 70px;
  background: #63E2C6;
  cursor: pointer;
}

nav > label > span {
  display: block;
  margin: 4px auto;
  height: 4px;
  width: 25px;
  border-radius: 1px;
  background: #333;
}

nav > label > span:nth-child(1) {
  margin-top: 25px;
}

input[type=checkbox]:checked ~ .menu {
  display: block;
}

@media (max-width: 768px) {
  .menu {
    display: none;
  }
}

＆＃13;

<nav>
  <h2 class="brand">Brand</h3>
  <input type="checkbox" id="nav">
  <label for="nav">
    <span></span>
    <span></span>
    <span></span>
  </label>
  <ul class="menu">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

<h1>Checkbox Nav</h1>

<p><span class="first-letter">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sem massa, maximus ut est ac, mollis posuere lectus. Morbi vel massa tristique, consectetur lorem in, placerat lectus. Maecenas nec scelerisque neque. Aliquam facilisis tristique fringilla. Quisque aliquam blandit ex, ut egestas felis vestibulum nec. Maecenas sem nulla, luctus et rhoncus vitae, faucibus at est. Vestibulum interdum malesuada neque. Praesent eget lectus eros. Ut et odio non velit cursus elementum. Sed vitae tortor urna. Ut ut leo magna. Vivamus convallis ac nibh nec venenatis. Donec a sem euismod, posuere risus vitae, ullamcorper felis. Curabitur in massa tempus, consectetur eros vel, sodales risus. Nulla nec congue lectus, id rutrum turpis. Sed in mauris urna. Ut hendrerit tincidunt egestas. Integer rhoncus sollicitudin nulla, vel dignissim risus convallis eu. Integer libero magna, suscipit sed euismod at, mattis a est. Sed porttitor massa id lacinia faucibus. Vivamus aliquam rhoncus sapien sit amet gravida. Aenean scelerisque nunc sit amet facilisis dapibus. Ut vel dui at sapien pretium pellentesque. Fusce in dui enim. Cras ac turpis orci. Morbi elementum in nulla a lacinia. Aenean eget leo elit.</p>

＆＃13;

Answer 1

我可以看到您正在使用HTML5，因此您可以通过添加隐藏的HTML5属性来隐藏标签

示例：

    <label hidden>Hello, World</label>

Answer 2

此部分的display: block以下display: none：

nav label {
  position: absolute;
  display: none;
  top: 0;
  right: 0;
  display: block;
  height: 70px;
  width: 70px;
  background: #63E2C6;
  cursor: pointer;
}

你见过吗？

在标签元素上将显示设置为无

2 个答案: