html - 在标签元素上将显示设置为“无”

Closed. This question is off-topic。它当前不接受答案。












                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。

                        2年前关闭。



在以下代码中，我无法将标签元素显示设置为none。由于某些奇怪的原因，当我添加行display: none时，什么也没有发生。这是我的代码：

* {
  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;
  }
}

<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>

最佳答案

在此部分中，您的display: block下面有一个display: none：

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

你见过它么？

关于html - 在标签元素上将显示设置为“无”，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42914601/

上一篇：javascript - 如何在 jquery 中编写 css 转换

下一篇：html - 如何在非 anchor 文本下划线？

javascript - Chromecast 从接收方向发送方发送消息

javascript - jQuery 验证插件错误摘要

html - CSS如何在没有标签的情况下定位元素

javascript - 单击小图像并覆盖大图像

html - 为什么在 div 上使用的 font-size 属性会影响 div 的宽度和高度？

javascript - 使用 jquery 计算每个列表项的宽度

javascript - 如何删除元素onclick

html - 创建 3 个完全相等的图片，占据页面的高度和宽度

html - 如何解决 Google Maps div map_canvas 在 Firefox 中向右移动的问题？