当任务栏中的项目全部位于标签中时，向右+向左浮动项目<li>

Question

我的导航栏如下所示：https://ibb.co/rs7Ndr5

我想添加另一个链接到我的导航栏，"；寄存器"；，其将出现在最右侧。唯一的问题是，我制作了导航栏，其中有一个包含所有链接的

，并且该列表中的所有内容都使用css放在导航栏中。因此，如果我将新项目添加到列表中，它将像列表中的其他项目一样向左浮动，因为css将

标记中的所有内容都放入导航栏中。

这是我的css：

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
font-family: Tahoma, Geneva, sans-serif;
background-color: #333;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
/* for buttons*/
.paging {
background-color: #333;
border: none;
color: white;
padding: 8px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
}
button:hover {
background-color: #111;
}
</style>

这是html:

<ul>
<li class="all"><a href="/">All videos</a></li>
<li class="stam"><a href="/stam">Stam videos</a></li>
<li class="music"><a href="/music">Music videos</a></li>
<li class="news"><a href="/news">News videos</a></li>
<li class="news"><a href="/contact">Contact</a></li>
</ul>

请帮帮我！非常感谢！

Answer 1

我想我理解你想要实现的目标。您可以将类添加到新的"中；寄存器"；按钮并将其向右浮动。像这样：

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
font-family: Tahoma, Geneva, sans-serif;
background-color: #333;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
/* for buttons*/
.paging {
background-color: #333;
border: none;
color: white;
padding: 8px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
}
button:hover {
background-color: #111;
}
.register {
float: right;
}

<ul>
<li class="all"><a href="/">All videos</a></li>
<li class="stam"><a href="/stam">Stam videos</a></li>
<li class="music"><a href="/music">Music videos</a></li>
<li class="news"><a href="/news">News videos</a></li>
<li class="news"><a href="/contact">Contact</a></li>
<li class="register"><a href="/contact">Register</a></li>
</ul>