0

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

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}

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

4

1 回答 1

0

我可以想到 3 种不同的方法来解决您的问题：

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

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

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

于 2013-07-09T04:13:28.470 回答