Css定位和媒体查询

Question

我正在努力创建一个简单的响应式网页，为此我需要一些方法来解决我的问题 -

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

时

现在我想要的是这个标志不会向下移动但是，留在那里并与身体的其余部分一起滚动。

这是我的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;
  }

Answer 1

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

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

jsFiddle Demo

Answer 2

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

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

这种情况正在发生，因为当您调整浏览器大小时，您的img大小太大而无法放入同一行

Answer 3

是否需要悬空？如果你不介意保持内联，你可以这样做：max-height: 100%; width: auto;这会使它保持在菜单栏的范围内。