html - 导航栏按钮间距彼此下方而不是并排

Question

我的导航栏按钮间距有问题。我不知道为什么字母在彼此下面而不是并排，我试过使用内联 block ；但这似乎没有用，所以我确定代码中发生了一些事情，导致它跳闸了。 sub_menu 使用 inline-block 工作正常，

Jsfiddle

CSS

#right_menu {
  position:fixed;
  font-size:15px;
  top:-80px;
  right:-115px;
  padding:70px;
  background-color:#FF00FF;
  width:-40%;
  height:110%;
  text-transform:uppercase;
}

#right_menu > li {
  text-align:center;
  display:block;
  padding:20px;
  height:16%;
  top:-10px;
  width:0;
  margin-bottom:0;
  text-transform:uppercase;
  position:relative;
  -webkit-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
}

#right_menu li a {
  text-align:center;
  display:block;
  padding:20px;
  position:fixed;
  text-transform:uppercase;
  text-decoration:none;
}

#right_menu > li:hover > a {
  background:#FF00FF;
  top:-1px;
}

html

<ul id="right_menu"><li><a href="#">Home</a></li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Testing Two</a></li>
        <li><a href="#">Testing Three</a>
          <ul class="sub_menu"><li><a href="#">Sub Test</a>
          <ul class="sub_menu2"><li><a href="#">Sub Test Two</a>
        </li>
</ul></li>
          </ul></li>
        <li><a href="#">Message Me</a></li>
</ul>

Answer 1

你也可以试试 white-space: nowrap;

#right_menu li a {
 text-align: center;
 display: block;
 padding: 20px;
 position: fixed;
 text-transform: uppercase;
 text-decoration: none;
 white-space: nowrap;
}

https://jsfiddle.net/afelixj/sb92hx0k/1/