JSFiddle - React, Tailwind, and code Playground

by Tìm ở đây Khoá học CNTT

HTML

<h1>Liên kết điều hướng nngang</h1>
<p>Theo mặc định, các mục danh sách được hiển thị theo chiều dọc. Trong ví dụ này, chúng tôi sử dụng display: inline-block để hiển thị chúng theo chiều ngang (cạnh nhau).</p>
<p>Lưu ý: Nếu bạn thay đổi kích thước cửa sổ trình duyệt, các liên kết sẽ tự động bị phá vỡ khi nó trở nên quá trật trội.</p>

<ul class="nav">
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About Us</a></li>
  <li><a href="#clients">Our Clients</a></li>  
  <li><a href="#contact">Contact Us</a></li>
</ul>

CSS

.nav {
  background-color: yellow; 
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 0;
}

.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}