Float mục menu sang phải với CSS

Căn phải một vài mục trong navbar ngang

Áp dụng float: right cho <li> cụ thể để đẩy chúng sang bên phải navbar. Các mục mặc định float: left ở bên trái.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: orange;
    }
    li {
      float: left; /* Mặc định bên trái */
    }
    li a {
      display: block;
      padding: 12px 20px;
      color: white;
      text-decoration: none;
    }
    li a:hover { background-color: #e67e00; }
  </style>
</head>
<body>
  <ul>
    <li><a href="#home">Trang chủ</a></li>
    <li><a href="#news">Tin tức</a></li>
    <li style="float: right"><a href="#contact">Liên hệ</a></li> <!-- Căn phải -->
    <li style="float: right"><a href="#about">Giới thiệu</a></li> <!-- Căn phải -->
  </ul>
</body>
</html>

"Liên hệ" và "Giới thiệu" float right → xuất hiện bên phải, thứ tự ngược (About ngoài cùng phải, Contact bên trái nó). Cách cũ, hiện nay dùng Flexbox (justify-content: space-between) hoặc margin-left: auto cho mục đầu tiên bên phải.