右对齐链接

通过将列表项向右浮动来右对齐链接（float:right;）：

实例

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

• Home
• News
• Contact
• About

边框分隔栏

将 border-right 属性添加到 <li>，以创建链接分隔符：

实例

/* 为所有列表项添加灰色右边框，最后一项（last-child）除外 */
li {
  border-right: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}

• Home
• News
• Contact
• About

灰色水平导航栏

带有细灰色边框的灰色水平导航栏的实例

实例

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}
li a {
  color: #666;
}

• Home
• News
• Contact
• About