1

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

我感谢任何和所有的反馈/帮助！

4

3 回答 3

3

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

<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-19T06:14:03.900 回答
1

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

您应该稍微修改一下以产生吸引人的外观，在这里

于 2013-05-19T04:34:45.633 回答
-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-19T03:54:39.340 回答