0

したがって、次のコードがあるとします。

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 とモバイルに変換しています)

4

1 に答える 1

3

の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

于 2013-08-14T09:56:18.313 に答える