Question

我有以下网站，我一直在建设作为我的研究生工作的一部分（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;
}

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

Answer 1

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

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

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

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

网站上不幸的无响应人力资源菜单

1 个答案: