为移动设备修复我的徽标和导航

Question

我一直在研究如何定位我的标志在移动设备的顶部和下面的标志是导航的方法。这就是在桌面上查看徽标和导航时的样子。徽标位于导航的中间。

zps46660bfe.jpg.html?sort=3&o=0

这就是在移动设备中看到的样子。

zps14a6e775.jpg

我使用骨架网格框架来设计这个网站。

这是我的HTML/标记

<!--HEADER -->
<div id="nav-container" class="container">
 <div class="six columns navigation navigation-left">
     <ul>
         <li><a href="#" title="Home">Home</a></li>
         <li><a href="#" title="Projects">Projects</a></li>
         <li><a href="#" title="Blog">Blog</a></li>
     </ul>
 </div>
 <div id="logo" class="four columns hide-mobile">
     <h1><a href="#" title="Aleem Guialap">Aleem Guialap</a></h1>
 </div>
 <div class="six columns navigation navigation-right">
     <ul>
         <li><a href="#" title="About">About</a></li>
         <li><a href="#" title="Gallery">Gallery</a></li>
         <li><a href="#" title="Contact">Contact</a></li>
     </ul>
 </div>
</div>

这是我的CSS

/**************************/
/*   NAVIGATION           */
/**************************/


.navigation-right{text-align:right}
.navigation-right li{margin-right:40px}
.navigation-left li{margin-left:40px}
.navigation li{display:inline; line-height:130px}
.navigation a{text-decoration:none; color:#4d4d4d; font-size:25px}
.navigation a:hover{color:#7e2d2d}

#logo h1 a{margin-top:20px; margin-bottom:20px; background:url(images/logo.png) no-repeat; display:inline-block; width:173px; height:105px; text-indent:-99999px}

我真的要感谢那些能为我的问题提供解决方案的人。我不确定是否需要更改标记和一些简单的样式。

Answer 1

我可以想出三种不同的方法来解决你的问题：

首先是离开标记，将徽标的位置设置为绝对，然后向左和向右浮动两个导航。

另一种方法是将徽标div移动到两个导航div的顶部，然后使用边距:0 auto对其进行居中，并且不要忘记设置div的宽度。然后将导航div向左和向右浮动。

第三，我建议的方法是将这两个导航组合到一个列表中，然后将前3项从左浮动到右边。