css - CSS和使用媒体查询设置“显示”

Question

所以假设我有以下代码：

td.topnav_link {
  padding: 5px 5px 5px 5px;
  background-color: #5babd7;
  border: 1px solid #578baf;
  cursor: default;
}

@media screen and (max-width: 500px) {
  #id_topnav_link_menu.topnav_link {
    display: block;
  }
  #id_topnav_link_about.topnav_link {
    display: hidden;
  }
  #id_topnav_link_contact.topnav_link {
    display: hidden;
  }
}

和

<td class="topnav_link" id="id_topnav_link_contact">
<a href="/contact/">contact</a>
</td>

当我缩小浏览器大小时，“关于”和“联系人”是否应该不会被隐藏？（在各种浏览器中测试时不适合我）

（注意：是的，我意识到我在不应该使用td的地方，但我正在慢慢地将我的旧布局转换为更多的 CSS 和更多的移动性）

Answer 1

没有任何hidden价值display。应该是none。但由于它是一个单元格，您应该使用visibility，这将隐藏单元格，但空间仍将保留在那里：

@media screen and (max-width: 500px) {
  #id_topnav_link_menu.topnav_link {
    display: block;
  }
  #id_topnav_link_about.topnav_link {
    visbility: hidden
  }
  #id_topnav_link_contact.topnav_link {
    visbility: hidden
  }
}

这是可能值的列表：https ://developer.mozilla.org/en-US/docs/Web/CSS/display