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>

当我调整浏览器大小时，“about”和“contact”是否会被隐藏？（在各种浏览器中测试时，它不适合我）

（注意：是的，我知道我使用的是 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

CSS并使用媒体查询设置“显示”

1 个答案: