在导航栏 CSS/HTML 中定位和对齐对象答案

【问题标题】：Positioning and Aligning Objects in Navbar CSS/HTML在导航栏 CSS/HTML 中定位和对齐对象
【发布时间】：2017-05-25 10:17:31
【问题描述】：

我正在尝试让当前位于侧面的链接移动到顶部并像在常规导航栏中一样对齐。

像这样： Rough Illustration of Goal

而不是目前所有的东西都挤在一边。

当前代码：https://jsfiddle.net/58dn7rw7/

#mySidenav a {
    position: fixed;
    right: -90px;
    transition: 0.3s;
    padding: 15px;
    width: 120px;
    color: white;
    border-radius: 100px 0 0 10px;
    text-align: right;
    text-decoration: none;
    font-family: 'Quicksand', sans-serif;
    font-size: 20px;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

#mySidenav a:hover {
    right: 0;
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

感谢您的帮助。

【问题讨论】：

我可能不明白你在说什么，但在小提琴中你正在使用顶部定位元素。您不能将最高值更改为您想要分散的值吗？

标签： html css animation

【解决方案1】：

如果你想坚持你的代码，我会以某种方式更新它：

HTML：

      <nav>
    <div id="mySidenav">
      <ul>
          <li> <a href="#" id="about">About</a></li>
          <li> <a href="#" id="blog">blog</a></li>
          <li> <a href="#" id="projects">projects</a></li>
          <li> <a href="#" id="contact">contact</a></li>
      </ul>


    </div>
  </nav>

CSS：

ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;    
}
li {
float: right;
margin-left:6px;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

 a:hover:not(.active) {
  background-color: #111;
 }

 #mySidenav a {
 position: relative;

 transition: 0.3s;
 padding: 15px;
 width: 120px;
 color: white;
 border-radius: 100px 0 0 10px;
 text-align: right;
 text-decoration: none;
 font-family: 'Quicksand', sans-serif;
 font-size: 20px;
 -ms-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg); }
 #mySidenav a:hover {
  right: 0;
 -ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
 transform: rotate(360deg); }

#about {
background-color: #4CAF50; }

#blog { 
 background-color: #2196F3; }

 #projects {
 background-color: #f44336; }
 #contact {  
 background-color: mediumorchid; }

https://jsfiddle.net/emilvr/58dn7rw7/2/

但是你需要使用你的效果来获得你需要的东西。

【讨论】：