html - 动画的 CSS 问题？无法对齐 li 中的文本？

Question

这非常令人沮丧，但我在对齐 li 中的链接文本时遇到问题添加动画后。我从一个水平对齐而不是垂直对齐的菜单中获取动画，并且能够将动画集成到其中，但是我的链接文本因此倾斜。

每个链接都在 li 内.下面是一个带有圆形动画的演示:

.menubar {
  position: absolute;
  height: calc(100% - 32px);
  width: 137px;
  left: -140px;
  top: 38px;
  background-color: #52DBA5;
}
.menubutton {
  width: 100%;
  height: 80px;
  padding-top: 0px;
  padding-bottom: 40px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  font-family: "Source Sans", Helvetica, Arial;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0);
  display: block;
  text-decoration: none;
}
/*HERE for menu animations*/

nav {
  width: 100%;
}
nav ul {
  list-style: none;
  text-align: left;
}
nav ul li {} nav ul li a {
  display: block;
  padding: 50px;
  top: 10px;
  text-decoration: none;
  color: #52DBA5;
  text-transform: uppercase;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
  transition: all .3s;
}
nav ul li a:hover {
  color: #52DBA5;
}
nav.circle ul li a {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
nav.circle ul li a:after {
  display: block;
  position: absolute;
  margin: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '.';
  color: transparent;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
}
nav.circle ul li a:hover:after {
  -webkit-animation: circle 1.2s ease-in forwards;
  padding-right: 50px;
}
/* Keyframes */

@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #333;
  }
}
/* Keyframes */

@-webkit-keyframes circle {
  0% {
    width: 1px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 1px;
    z-index: -1;
    background: white;
    border-radius: 100%;
  }
  100% {
    background: white;
    height: 5000%;
    width: 5000%;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0px;
    margin: auto;
    border-radius: 0;
  }
}
.menutext {
  width: 100%;
  height: 20px;
  top: -12px;
  color: #39946f;
  font-family: "source sans pro", , Helvetica, Arial;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

<div class="menubar">
  <nav class="circle">
    <ul>
      <li class="menubutton"><a class="menutext" href="#">'.$account['username'].'</a>
      </li>
      <li class="menubutton"><a class="menutext" href="#">chat</a>
      </li>
      <li class="menubutton"><a class="menutext" href="#">settings</a>
      </li>
      <li class="menubutton"><a class="menutext" href="#">users</a>
      </li>
    </ul>
  </nav>

  <form class="logoutframe" method="post" id="logout">
    <input class="logout" type="submit" name="logout" value="logout" /></input>
  </form>
</div>

我试过放置 padding并使用 left和 right在菜单按钮上，菜单文本，nav ul li a ， 一切。甚至尝试将文本放在 li 中的单个 ps 中.但是我的文字仍然没有在悬停时形成的框中居中:

我需要文本(“用户名”、“聊天”等)在 menubar 中左对齐和居中(文本略微位于底部，非常靠右)在悬停时形成的“圆圈”框中。

我该怎么做？

Answer 1

最初我误解了您的问题并写了一个不同的答案。以下是正确的。

您的代码中有很多额外/不必要的设置，但您无法实现左对齐的关键原因是 ul 元素始终具有与之关联的默认填充。它将列表的内容向右推一个大值，因此看起来好像对齐不正确。

如果您按照我在下面的代码片段中指出的进行更改，您将能够获得所需的内容。

.menubar {
  position: absolute;
  /*height: calc(100% - 32px);
  width: 137px; ideally these should be large enough to accomodate the element */
  /*left: -140px; commented for demo */
  top: 38px;
  background-color: #52DBA5;
}
.menubutton {
  width: 100%;
  height: 80px;
  /*padding-top: 0px;
  padding-bottom: 40px; not required*/
  text-transform: uppercase;
  /*text-align: center; remove this */
  cursor: pointer;
  font-family: "Source Sans", Helvetica, Arial;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0);
  display: block;
  text-decoration: none;
  line-height: 80px; /* add this to vertically center align the text */
}

/*HERE for menu animations*/

nav {
  width: 100%;
}
nav ul {
  list-style: none;
  /*text-align: left; not required as this is default */
  padding: 0px; /* add this */
}
nav ul li {} nav ul li a {
  display: block;
  text-indent: 8px; /* add this to indent just the text without affecting white box */
  padding: 0px; /* change this */
  top: 10px;
  text-decoration: none;
  color: #52DBA5;
  text-transform: uppercase;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
  transition: all .3s;
}
nav ul li a:hover {
  color: #52DBA5;
}
nav.circle ul li a {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
nav.circle ul li a:after {
  display: block;
  position: absolute;
  margin: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '.';
  color: transparent;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
}
nav.circle ul li a:hover:after {
  animation: circle 1.2s ease-in forwards; /* changed so others can see animation */
  padding-right: 50px;
}

/* Keyframes */

@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #333;
  }
}
/* Keyframes */

@-webkit-keyframes circle {
  0% {
    width: 1px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 1px;
    z-index: -1;
    background: white;
    border-radius: 100%;
  }
  100% {
    background: white;
    height: 5000%;
    width: 5000%;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0px;
    margin: auto;
    border-radius: 0;
  }
}
.menutext {
  width: 100%; /* change this */
  /*height: 20px;
  top: -12px; not required */
  color: #39946f;
  font-family: "source sans pro", , Helvetica, Arial;
  font-weight: bold;
  /*text-align: center; remove this */
  text-decoration: none;
}

<div class="menubar">
  <nav class="circle">
    <ul>
     
<li class="menubutton"><a class="menutext" href="#">'.$account['username'].'</a>
      </li>
      <li class="menubutton"><a class="menutext" href="#">chat</a>
      </li>
      <li class="menubutton"><a class="menutext" href="#">settings</a>
      </li>
      <li class="menubutton"><a class="menutext" href="#">users</a>
      </li>
    </ul>
  </nav>

  <form class="logoutframe" method="post" id="logout">
    <input class="logout" type="submit" name="logout" value="logout" /></input>
  </form>
</div>