0

我有以下网站，作为我研究生工作的一部分（http://www.ecu.edu/english/tpc/tpcintern/），它似乎运行良好，除了最上面的导航部分（菜单栏和代表社交网络的小图标）。使用的 CSS 如下：

#navigation {
 font-family: 'Lato', sans-serif;
 font-size: 1.3em;
 font-style: normal;
 float: left;
 margin: .5em 0 0 .5em;
 width: 70%;
 height: 2em;
 position: relative;
 padding: .5em 0;
 text-transform: uppercase;
 font-size: 1em;
 background-color: #592a8a;
}

#navigation ul {
 text-align: center;
 padding: 0;
 margin: 0;
 list-style: none;
}

#navigation li {
 font-weight: bold;
 display: inline;
 list-style: none;
 display: block;
 float: left;
 width: 11em;
 height: 2em;
 text-align: center;
 padding: .5em 0 0 0;
}

#navigation li:first-child {
 border-left: 0;
}

#navigation li:last-child {
 border-right: 0;
}

#navigation li a {
 color: #fff;
 text-decoration: none;
}

#navigation li a:hover {
 color: #fff;
 border: 0;
 text-decoration: underline;
}


#social ul {
 text-align: center;
 padding: 0;
 margin: 0;
 list-style: none;
 width: 100%;
}

#social li {
 position: relative;
 top: -1.5em;
 left: 1em;
 list-style: none;
 display: block;
 float: left;
 width: 4em;
 height: 3em;
 text-align: center;
 padding: 2em 1em 0 0;
 margin: 0;
}

#social li:first-child {
 border-left: 0;
}

#social li:last-child {
 border-right: 0;
}

该网站的其余部分似乎很流畅，但我似乎无法弄清楚菜单栏部分。当屏幕尺寸太小时，它就会中断。

4

1 回答 1

0

如果从#navigation 元素中删除高度，则在最小化浏览器时将不再隐藏文本。

要根据浏览器的宽度更改站点，请使用媒体查询。

@media only screen and (max-device-width: 480px) {
   #social_media {
      display:none;
   }
}

在此示例中，分辨率低于 480 像素时，#social_media 元素将消失。

于 2013-04-04T01:53:39.220 回答