Code css chỉnh html ul li thành 1 dòng

HTML mặc định đang hoạt động với một số phần đệm và hiển thị tất cả các mục trong các dòng khác nhau với các đĩa kiểu danh sách. Vì vậy, nhiều người muốn liệt kê thời gian trong cùng một dòng mà không có bất kỳ kiểu danh sách nào.

Hôm nay, tôi sẽ hướng dẫn một số thủ thuật CSS để hiển thị tất cả các danh sách trên một dòng, tức là khi bạn muốn hiển thị menu trong HTML của mình, thì bạn sẽ viết mã HTML sau.

CODE HTML

<ul>
   <li>Home</li>
   <li>Blog</li>
   <li>Faq</li>
   <li>About Us</li>
   <li>Contact Us</li>
</ul>

KẾT QUẢ

Home
Blog
Faq
About Us
Contact Us

Để hiển thị tất cả các danh sách trong một dòng, hãy làm theo mã CSS sau:

CÁCH 1

ul { 
   padding: 0px;
}
li {
   float: left;
   width: auto;
   list-style: outside none none;
}

CÁCH 2

ul { 
   padding: 0px
}
li {
   display: inline-block;
   width: auto;
   list-style: outside none none;
}

Khi sử dụng mã này, tất cả các phần tử sẽ hiển thị trên một dòng với màn hình inline-block. Chúng ta cài đặt width: auto vì vậy bây giờ mục danh sách sẽ có width theo nội dung.

Hoặc bạn có cũng có thể xem demo tại codepen

https://codepen.io/phu68/pen/gOKzarQ