html - MVC 如何制作注销按钮

Question

首先 CSS 不是我的强项。我按照这个例子来创建我的菜单栏

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black_active

首先我试着把它放在 jsFiddle 上但看起来不一样

当用户选择不同的按钮时，我可以使绿色选择发生变化。用户通过身份验证后，可以在登录名和用户名之间切换。

在我看来，我将其更改为:

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#Login">Login</a></li>
  <li> <a href="#Logout" style="color: red">Welcome Administrator Logout</a> </li>
</ul>

但不保持在同一条线上并且看起来不太好。关于如何改进我的用户界面的任何建议？让它保持在同一条线上还是改变方法？

当前的 CSS:

<style>
body {
  background-color: black;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

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

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

.active {
    background-color: #4CAF50;
}
</style>

Answer 1

我已经更新了你的 jsFiddle

您应该将欢迎管理员消息与注销按钮分开