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

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

Answer 2

我使用门图像来改善风格。

<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 style="float:right"><a href="#about">Login 
      <img src="http://i66.tinypic.com/25oxgxz.jpg" border="0"></a></li>
  <li style="float:right"><a href="#Logout" style="color: red">Welcome Administrator
      <img src="http://i64.tinypic.com/157n953.png" border="0"></a></li>
</ul>

<强> JSFiddle