Question

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

http://s255.photobucket.com/user/testament1234/media/desktopnav_zps46660bfe.jpg.html?sort=3&o=0

这就是在移动设备中查看时的样子

http://i255.photobucket.com/albums/hh140/testament1234/navigation_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

我可以考虑针对您的问题的3种不同方法：

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

另一个是移动两个导航div顶部的徽标div然后使用margin：0 auto将其居中，并且不要忘记设置div的宽度。然后向左和向右浮动两个导航div。

第三，我推荐的方法是将两个导航组合到一个列表中，然后将前3个项目向左浮动，然后向右浮动3个项目。

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

1 个答案: