1

我正在尝试制作一个简单的响应式网页，为此我需要一些方法来解决我的问题 -页面有一些明显的标志空间

现在，当我调整窗口大小并查看

调整大小后的页面

现在我想要的是这个标志不要向下加载，而是留在那里并与身体的其他部分一起滚动。

这是我的html

<ul id="gn-menu" class="gn-menu-main" style="z-index:99">
            <li class="gn-trigger">
                <a class="gn-icon gn-icon-menu"><span>Menu</span></a>
                <nav class="gn-menu-wrapper">
                    <div class="gn-scroller">
                        <ul class="gn-menu">
                            <li><a class="gn-icon gn-icon-download">Home</a></li>                            
                            <li><a class="gn-icon gn-icon-cog">Us</a></li>                                                            
                            <li><a class="gn-icon gn-icon-download">MSR Scenes</a></li>
                            <li><a class="gn-icon gn-icon-cog">Literature</a></li>
                            <li><a class="gn-icon gn-icon-help">Music</a></li>
                            <li><a class="gn-icon gn-icon-cog">Food</a></li>
                            <li><a class="gn-icon gn-icon-download">Gaming</a></li>
                            <li><a class="gn-icon gn-icon-cog">Sci-Tech</a></li>
                            <li><a class="gn-icon gn-icon-help">Horoscopes</a></li>
                            <li><a class="gn-icon gn-icon-cog">Art</a></li>
                            <li><a class="gn-icon gn-icon-download">Comic</a></li>
                            <li><a class="gn-icon gn-icon-cog">Sports</a></li>
                            <li><a class="gn-icon gn-icon-help">Pop Culture</a></li>
                            <li><a class="gn-icon gn-icon-download">Free Advice</a></li>                          
                        </ul>
                    </div><!-- /gn-scroller -->
                </nav>
            </li>
            <li style="position:relative"><img src="images/logo_01.jpg" width="230" height="90" style="z-index:-1" class="logo" ></li>
            <li><a id="us" >Us</a></li>
            <li><a id="home" ><span>Home</span></a></li>
        </ul>

列表样式如下 -

.gn-menu-main > li {
    display: block;
    float: right;
    height: 100%;
    border-right: 1px solid #c6d0da;
    text-align: center;
  }
.gn-menu-main > li:nth-child(1) {
    float: left;
    border-right: none;
    border-left: 1px solid #c6d0da;
  }

.gn-menu-main > li:nth-child(2) {
    float: left;
    border-right: none;
    border-left: 1px solid #c6d0da;
  }
4

3 回答 3

1

您可以设置min-width整个菜单的属性。

#gn-menu {
    min-width: 300px;   
}

jsFiddle 演示

于 2013-08-31T07:26:14.100 回答
1

我认为您应该使用媒体查询更改徽标图像大小以使其适合小屏幕的相同位置，如果您想将菜单适合小屏幕大小，您可能还需要使用媒体查询更改字体大小、填充等

.img{
  width:100px;height:100px;
}
@media screen and(max-width:480px)
{
   .img{
      width:50px;
      height:50px;
    }
 }

发生这种情况是因为当您调整浏览器的大小时，您的 img 尺寸变得太大而无法放在同一行中

于 2013-08-31T07:26:44.507 回答
0

需要悬垂吗？如果您不介意将其保持内联，您可以这样做：max-height: 100%; width: auto;这会将其保持在菜单栏的范围内。

于 2013-08-31T07:21:55.777 回答