中心标志导航栏

我已经通过类似的问题进行了搜索，但没有找到具体解决方案。我正在尝试让我的导航栏围绕我的中心徽标，徽标两侧均有偶数链接。但是，如果窗口较小，链接应显示在徽标下方。基本上，我想实现这个页面的效果：http://www.colbowdesign.com/index.html 中心标志导航栏

这里是我到目前为止的代码：

HTML

<header> 
      <img src="assets/CK-Square.png" class="logo"> 
      <ul> 
       <li><a href="#">Work</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Contact</a></li> 
       <li><a href="#">Social</a></li> 
      </ul> 
    </header>

CSS

.logo { 
     margin-left: auto; 
     margin-right: auto; 
     display: block; 
} 

header li{ 
     display: inline; 
} 

header { 
     width: 100% 
     height: auto; 
     border-style: solid; 
     margin: 0; 
     padding: 0; 
}

我明白任何和所有的反馈/帮帮我！

来源

2013-05-19 Micah

你能某处发布您运行的代码？ – kaidez

该网站只是浮动左边他们两个和右边两个。你可以做同样的事情，并根据需要使用媒体查询进行修改。 – Steven

此解决方案基于使用媒体查询将布局从小屏幕更改为桌面。

<header> 
    <h2 id="logo">Logo</h2> 
    <ul class="nav"> 
     <li><a href="#">Work</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">Social</a></li> 
    </ul> 
</header> 


header { 
    width: 90%; 
    margin: 0 auto; 
} 

#logo { 
    text-align: center; 
} 

.nav { 
    text-align: center; 
} 

.nav li { 
    display: inline; 
    margin-right: 1em; 
} 

/* use media query to change the layout */ 
@media (min-width: 768px) { 
    body { 
     background-color: #f2f2f2; 
    } 

    .nav { 
     margin-top: -42px; 
    } 

    .nav li:nth-child(1), .nav li:nth-child(2) { 
     float: left; 
    } 

    .nav li:nth-child(3), .nav li:nth-child(4) { 
     float: right; 
    } 
}

现场观看http://jsbin.com/arexuq/2/

来源

2013-05-19 06:14:03

非常感谢您的解释和代码。当我回来时，我会努力解决这个问题，并让我知道我是否能够自己工作！再次感谢！ – Micah

刚刚更新我的代码，并得到它的工作！再次感谢您的时间和帮助！ – Micah

@米卡这是伟大的弥迦，保持它 –

-2

使用表..

<table><tr> 
    <td><a href="#">Work</a></td> 
    <td><a href="#">About</a></td> 
    <td><img src="assets/CK-Square.png" class="logo"></td> 
    <td><a href="#">Contact</a></td> 
    <td><a href="#">Social</a></td> 
</tr></table>

来源

2013-05-19 03:54:39 matzone

但是当页面宽度减小时，它应该将徽标移动到中心顶部并保留下面的链接。 – Micah

你不应该使用表格。任何看着它的人都会大声吼叫。菜单不是表格数据。 – Steven

添加li:nth-child你的风格

如果你有四个列表，你可以补充一点：

header li:nth-child(1), header li:nth-child(2) { 
    float: left; 
} 
header li:nth-child(3), header li:nth-child(4) { 
    float: right; 
}

看到jsfiddle

你应该稍微修改它以产生一个有吸引力的出现ance，here

来源

2013-05-19 04:34:45

中心标志导航栏

回答

相关问题