Question

我目前正在使用花车，以便将我的徽标放在我的固定导航菜单的中心。我目前面临的问题是我向右浮动的项目以相反的顺序显示。

如何使用text-align来获得所需的结果并仍然保持固定的导航标题？

当前代码：

<img src="img/logo.png" class="logo" />

<ul class="nav">
   <li><a href="#section1" class="item1">A</a></li>
   <li><a href="#section2" class="item2">B</a></li>
   <li><a href="#section3" class="item3">C</a></li>
   <li><a href="#section4" class="item4">D</a></li>
   <li><a href="#section5" class="item5">E</a></li>
   <li><a href="#section6" class="item6">F</a></li>
</ul>

css：

header {
  width: 100%;
  padding: 0, 100px, 0, 0;
  margin: 10px, 100px, 35px, 0 ;
  position: fixed;
  height: 6em;
  background: transparent;
  top: 0;
  z-index: 1;
}
header .logo {
  display: block;
  height: 110px;
  text-indent: -9999px;
  width: auto;
  margin: 0 auto;
  position: relative;
}
header ul {
  margin: -85px auto 0 auto;
  height: 10px;
  list-style: none;
}

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

header li:nth-child(4), header li:nth-child(5), header li:nth-child(6){
  float: right;
}

Answer 1

最明显的解决方案，将菜单分成两部分并将徽标放在中间......然后根据需要浮动每个菜单。

* {
  margin: 0px;
  padding: 0;
}
ul {
  margin: 0;
  list-style: none;
  display: inline-block;
}
li {
  display: inline-block;
}
a {
  background: grey;
  color: white;
  padding: .5em;
}
nav {
  text-align: center;
}
.left {
  float: left;
  text-align: left;
}
.right {
  float: right;
  text-align: right;
}

<nav>
  <ul class="nav left">
    <li><a href="#section1" class="item1">A</a>
    </li>
    <li><a href="#section2" class="item2">B</a>
    </li>
    <li><a href="#section3" class="item3">C</a>
    </li>
  </ul>

  <a href="#" class="logo">Logo</a>

  <ul class="nav right">
    <li><a href="#section4" class="item4">D</a>
    </li>
    <li><a href="#section5" class="item5">E</a>
    </li>
    <li><a href="#section6" class="item6">F</a>
    </li>
  </ul>
</nav>

当然，您可能希望将所有物品捆在一起..在这种情况下，您根本不需要浮子

JSFiddle Demo

然后，我喜欢的这个（不是我的）更好：Codepen Demo

在固定导航中居中徽标

1 个答案: