Question

好的，所以我做了这个导航栏：

我想在我的导航栏中间使用“Unity Code”，但我已经尝试了但是我似乎无法让它工作。

任何帮助？

Answer 1

好吧，为了在页面中心进行导航，您需要绳索导航在 div 中，所以我将 div 添加到类 .rope，并设置样式.rope { display: flex; justify-content: center;}在下面的代码中：

/*Css Navigation code*/

.rope {
  display: flex;
  justify-content: center;
}
.unity-code-logo {
  background-size: 100px 59px;
  width: 50px;
  height: 59px;
  position: absolute;
  top: 20px;
  left: 460px;
}
.main-navigation {
  display: inline;
  font-family: ubuntu;
  font-size: 15px;
  font-weight: bold;
}
.main-navigation ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.main-navigation li {
  color: #fff;
  background: #181818;
  display: block;
  float: left;
  margin: 0 2px 0 0;
  padding: 12px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
}
.main-navigation li a {
  color: #fff;
  text-decoration: none;
  display: block;
}
.main-navigation li:hover {
  @include transition(background, 0.25s);
  background: #453E3E;
}
.main-navigation ul li ul {
  background: #181818;
  visibility: hidden;
  float: left;
  min-width: 150px;
  position: absolute;
  transition: visibility 0.65s ease-in;
  margin-top: 12px;
  left: 0;
  z-index: 999;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li ul:hover {
  visibility: visible;
}
.main-navigation ul li ul li {
  clear: both;
  padding: 5px 0 5px 18px;
  width: 100%;
}
.main-navigationul li ul li:hover {
  background: #74b7e4;
}
.navbar-brand {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  text-align: center;
  margin: auto;
}

<div class="rope">
  <!--Navigation Bar-->
  <nav id="navigation" class="main-navigation" role="navigation">
    <ul class="navigation-menu-main">
      <li><a href="#" class="navigation-menu-main-item">Home</a>
      </li>
      <li><a href="#" class="navigation-menu-main-item">Store</a>
      </li>
      <li><img src="http://mt.google.com/vt/icon?color=ff004C13&name=icons/spotlight/spotlight-waypoint-b.png" style="height:10px;"></li>
      <li><a href="#" class="navigation-menu-main-item">Projects</a>
        <ul>
          <li><a href="#" class="navigation-menu-main-item sub-navigation-menu">Connect</a>
          </li>
          <li><a href="#" class="navigation-menu-main-item sub-navigation-menu">Alpha</a>
          </li>
          <li><a href="#" class="navigation-menu-main-item sub-navigation-menu">XXXX</a>
          </li>
          <li><a href="#" class="navigation-menu-main-item sub-navigation-menu">XXXX</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

默认的div(.rope) 100％宽度，所以如果你想将宽度提供给 rope div ，您需要添加margin: 0 auto; 风格(.rope)。只需在另一个<img>中添加<li></li>，但因为你没有，只有3，所以不会在中间，它可能是正确的或左边的，否则将是中间{{1}对于单词下面的商店。

让我知道你需要什么？

导航栏中的徽标

1 个答案: