Question

我搜索过类似的问题，但没有找到具体的解决方案。我试图让我的导航栏围绕我的中心徽标，徽标两侧有许多链接。但是，如果窗口较小，则链接应显示在徽标下方。基本上我正在尝试实现此页面的效果：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;
}

感谢所有反馈/帮助！

Answer 1

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

<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/

Answer 2

将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

您应该稍微修改它以产生有吸引力的外观，here

Answer 3

使用表..

<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>

带有居中徽标的导航栏

3 个答案: