动画的CSS问题？无法在li中对齐文字？

Question

这令人难以置信地令人沮丧但是在添加动画后我在li内对齐链接文本时遇到了问题。我从一个水平对齐而不是垂直对齐的菜单中获取动画，并且能够集成动画，但结果是我的链接文本偏斜。

每个链接都在li之内。下面是一个带圆圈动画的演示：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

我需要文字（＆＃34;用户名＆＃34;，＆＃34;聊天，＆＃34;等）在 {中保持对齐＆＃34;圈＆＃34; {1}} 并居中（文字略微偏向底部，非常靠右）悬停时形成的框。

我该怎么做？

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>