javascript - 我怎样才能使我的导航内容居中？

Question

我的导航内容没有居中，我不知道为什么。任何帮助或可能的修复都会帮助我！我迷路了，到目前为止我在谷歌上读过的所有东西都试过了，你会在我的代码中看到我迄今为止尝试过的东西。

这是代码：

ul li {
  list-style: none; }

html {
  font-family: "Roboto", serif; }

.navigation {
  position: fixed;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.5em;
  height: 180px;
  font-family: "Roboto", serif;
  transition: all 0.5s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  background-color: rgba(175,213,123,0.70); }
  .navigation ul {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
    z-index: 1;
}
    .navigation ul li {
      float: left;
      padding: 0 20px;
      text-decoration: none;
      text-transform: uppercase;
      color: #222222;
      margin: -12px 0;
      letter-spacing: 0.200em;
      transition: all 0.5s ease; }
      .navigation ul li:hover {
        color: #ffa947;
        cursor: pointer; }
      @media (min-width: 0) and (max-width: 770px) {
        .navigation ul li {
          margin: 17px 0; } }
    .navigation ul li.reg {
      font-size: 10px;
      font-size: 0.625rem; }
      @media (min-width: 0) and (max-width: 770px) {
        .navigation ul li.reg {
          display: none; } }
    .navigation ul li.title {
      font-size: 24px;
      font-size: 1.5rem; }
  .navigation h1 {
    font-size: 24px;
    font-size: 1.5rem;
    color: #222222;
    font-weight: 300;
    z-index: 1;
    margin: 0;
    padding: 0;
    letter-spacing: 10px; }
  @media (min-width: 0) and (max-width: 770px) {
    .navigation {
      flex-direction: column;
      height: auto; } }

.navigation.sticky {
  height: 55px;
  background-color: rgba(175,213,123,1);
}
  .navigation.sticky::after {
    opacity: 1;
    filter: alpha(opacity=100); }
  .navigation.sticky ul li {
    margin: 0; }
  @media (min-width: 0) and (max-width: 770px) {
    .navigation.sticky {
      height: auto; }
      .navigation.sticky .title {
        margin: 17px 0; } }

.navigation .hidden {
  visibility: hidden;
  height: 0;
  display: none; }
  @media (min-width: 0) and (max-width: 770px) {
    .navigation .hidden {
      display: flex;
      flex-direction: column;
      margin: 0;
      padding: 0;
      float: left; }
      .navigation .hidden li {
        margin: 0;
        padding: 10px 0;
        transition: all 0s; } }
.navigation .hidth {
  display: none; }
.navigation .switch .hidth {
  display: block; }
.navigation .switch .unhid {
  display: none; }
.navigation .hidden.showmenu {
  visibility: hidden;
  height: 0;
  display: none; }
  @media (min-width: 0) and (max-width: 770px) {
    .navigation .hidden.showmenu {
      visibility: visible;
      height: auto;
      display: block; }
      .navigation .hidden.showmenu li {
        width: 100%;
        float: left;
        transition: all 0s; }
        .navigation .hidden.showmenu li:last-child {
          padding-bottom: 30px; } }
.navigation .bar {
  display: none;
  margin: 17px 0;
  font-size: 21px; }
  @media (min-width: 0) and (max-width: 770px) {
    .navigation .bar {
      display: block; } }
  .navigation .bar:hover {
    cursor: pointer; }

    <nav class="navigation">
        <ul>
            <a href="#"><li class="reg goHome">Kleingartenverein</li></a>
            <a href="#"><li class="reg goug">UrbanGardening</li></a>
            <a href="#"><li class="title gotop">GARDEN7</li></a>
            <a href="#"><li class="reg goGalerie">Galerie</li></a>
            <a href="#"><li class="reg goKontakt">Kontakt</li></a>
            <span class="bar">
            <i class="fa fa-bars unhid" aria-hidden="true"></i> 
            <i class="fa fa-times hidth" aria-hidden="true"></i>
          </span>
        </ul>
        <ul class="hidden">
            <a href="#"><li class="goHomemob">Kleingartenverein</li></a>
            <a href="#"><li class="goKleingartenvereinmob">Urban Gardening</li></a>
            <a href="#"><li class="goGaleriemob">Galerie</li></a>
            <a href="#"><li class="goKontaktmob">Kontakt</li></a>
        </ul>

    </nav>

我将不胜感激查看我的问题和可能的解决方法！先感谢您！

标签： javascripthtmlcss

Answer 1

尝试固定每个菜单项的宽度：

ul li {
  list-style: none; }

html {
  font-family: "Roboto", serif; }

.navigation {
  position: fixed;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.5em;
  height: 180px;
  font-family: "Roboto", serif;
  transition: all 0.5s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  background-color: rgba(175,213,123,0.70); }
  .navigation ul {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
    z-index: 1;
}
    .navigation ul li {
      float: left;
      padding: 0 20px;
      width: 160px; /* add this line */
      text-decoration: none;
      text-transform: uppercase;
      color: #222222;
      margin: -12px 0;
      letter-spacing: 0.200em;
      transition: all 0.5s ease; }
      .navigation ul li:hover {
        color: #ffa947;
        cursor: pointer; }
      @media (min-width: 0) and (max-width: 770px) {
        .navigation ul li {
          margin: 17px 0; } }
    .navigation ul li.reg {
      font-size: 10px;
      font-size: 0.625rem; }
      @media (min-width: 0) and (max-width: 770px) {
        .navigation ul li.reg {
          display: none; } }
    .navigation ul li.title {
      font-size: 24px;
      font-size: 1.5rem; }
  .navigation h1 {
    font-size: 24px;
    font-size: 1.5rem;
    color: #222222;
    font-weight: 300;
    z-index: 1;
    margin: 0;
    padding: 0;
    letter-spacing: 10px; }
  @media (min-width: 0) and (max-width: 770px) {
    .navigation {
      flex-direction: column;
      height: auto; } }

.navigation.sticky {
  height: 55px;
  background-color: rgba(175,213,123,1);
}
  .navigation.sticky::after {
    opacity: 1;
    filter: alpha(opacity=100); }
  .navigation.sticky ul li {
    margin: 0; }
  @media (min-width: 0) and (max-width: 770px) {
    .navigation.sticky {
      height: auto; }
      .navigation.sticky .title {
        margin: 17px 0; } }

.navigation .hidden {
  visibility: hidden;
  height: 0;
  display: none; }
  @media (min-width: 0) and (max-width: 770px) {
    .navigation .hidden {
      display: flex;
      flex-direction: column;
      margin: 0;
      padding: 0;
      float: left; }
      .navigation .hidden li {
        margin: 0;
        padding: 10px 0;
        transition: all 0s; } }
.navigation .hidth {
  display: none; }
.navigation .switch .hidth {
  display: block; }
.navigation .switch .unhid {
  display: none; }
.navigation .hidden.showmenu {
  visibility: hidden;
  height: 0;
  display: none; }
  @media (min-width: 0) and (max-width: 770px) {
    .navigation .hidden.showmenu {
      visibility: visible;
      height: auto;
      display: block; }
      .navigation .hidden.showmenu li {
        width: 100%;
        float: left;
        transition: all 0s; }
        .navigation .hidden.showmenu li:last-child {
          padding-bottom: 30px; } }
.navigation .bar {
  display: none;
  margin: 17px 0;
  font-size: 21px; }
  @media (min-width: 0) and (max-width: 770px) {
    .navigation .bar {
      display: block; } }
  .navigation .bar:hover {
    cursor: pointer; }

<nav class="navigation">
        <ul>
            <a href="#"><li class="reg goHome">Kleingartenverein</li></a>
            <a href="#"><li class="reg goug">UrbanGardening</li></a>
            <a href="#"><li class="title gotop">GARDEN7</li></a>
            <a href="#"><li class="reg goGalerie">Galerie</li></a>
            <a href="#"><li class="reg goKontakt">Kontakt</li></a>
            <span class="bar">
            <i class="fa fa-bars unhid" aria-hidden="true"></i> 
            <i class="fa fa-times hidth" aria-hidden="true"></i>
          </span>
        </ul>
        <ul class="hidden">
            <a href="#"><li class="goHomemob">Kleingartenverein</li></a>
            <a href="#"><li class="goKleingartenvereinmob">Urban Gardening</li></a>
            <a href="#"><li class="goGaleriemob">Galerie</li></a>
            <a href="#"><li class="goKontaktmob">Kontakt</li></a>
        </ul>

    </nav>