CSS 和使用媒体查询设置 "display"

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

显示 没有隐藏 值。它应该是 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