Hướng dẫn

Cách thoát khỏi Bullets trong CSS

Theo mặc định, khi trình duyệt Web hiển thị danh sách không có thứ tự trong một trang Web, mỗi mục trong danh sách có một dấu đầu dòng đứng trước. Hành vi này không phải lúc nào cũng mong muốn và có thể không phù hợp với thiết kế tổng thể của bạn cho trang. Sử dụng CSS, bạn có thể tạo một lớp để xóa dấu đầu dòng khỏi danh sách cụ thể trên trang của mình hoặc bạn có thể nhắm mục tiêu trực tiếp thẻ “ul” HTML để xóa dấu đầu dòng khỏi tất cả danh sách trên trang.

1

Tạo một trang HTML mới trong trình soạn thảo văn bản hoặc ứng dụng phát triển Web.

2

Tạo một danh sách không có thứ tự đơn giản bằng cách thêm HTML sau vào nội dung trang:

  • Mục 1
  • Mặt hàng 2
  • Mặt hàng 3

Lưu trang và xem trong trình duyệt Web. Bạn sẽ thấy rằng trình duyệt hiển thị một dấu đầu dòng bên cạnh mỗi mục trong danh sách.

3

Thêm mã sau vào phần của trang:

Thao tác này sẽ xóa các dấu đầu dòng khỏi bất kỳ danh sách nào bằng cách sử dụng lớp “myList”. Lưu trang và tải lại trong trình duyệt Web của bạn để xem các thay đổi.

4

Thay đổi quy tắc CSS:

.myList {list-style-type: none;}

Đến:

ul {list-style-type: none; }

Điều này nhắm mục tiêu thẻ “ul” HTML và xóa các dấu đầu dòng khỏi tất cả các danh sách không có thứ tự trên trang của bạn. Thêm danh sách ví dụ thứ hai và xem trang trong trình duyệt Web của bạn để xác minh rằng cả hai danh sách đều hiển thị mà không có dấu đầu dòng.

$config[zx-auto] not found$config[zx-overlay] not found