CSS các li

CSS có thể được sử dụng để thay đổi danh sách dấu đầu dòng thành hình vuông hoặc hình tròn, nhưng điều này cung cấp rất ít quyền kiểm soát đối với hình thức hoặc vị trí của chúng

Các dấu đầu dòng HTML có thể được thay thế bằng hình ảnh đồ họa bằng cách sử dụng "hình ảnh kiểu danh sách". Tuy nhiên, vị trí của những hình ảnh này không nhất quán trên hầu hết các trình duyệt hiện đại. Cũng có rất ít quyền kiểm soát cách các dấu đầu dòng xuất hiện bên cạnh các mục trong danh sách

Một lựa chọn tốt hơn nhiều là sử dụng hình nền cho dấu đầu dòng. Vì vậy, làm thế nào điều này đạt được?

Bước 1 - Tạo một danh sách cơ bản

Bắt đầu với một danh sách không có thứ tự cơ bản. Tất cả các mục trong danh sách đều đang hoạt động (được bao bọc trong ). Tuy nhiên, điều này không cần thiết. Đối với ví dụ này, "#" được sử dụng làm liên kết giả

Bước 2 - Loại bỏ các viên đạn

Để xóa các dấu đầu dòng trong danh sách HTML, hãy đặt "kiểu danh sách" thành "không"

Bước 3 - Xóa phần đệm và lề

Danh sách HTML tiêu chuẩn có số lượng thụt lề trái nhất định. Số lượng khác nhau trên mỗi trình duyệt. Một số trình duyệt sử dụng phần đệm (Mozilla, Netscape, Safari) và các trình duyệt khác sử dụng lề (Internet Explorer, Opera) để đặt số lượng thụt lề

Để xóa thụt lề trái này một cách nhất quán trên tất cả các trình duyệt, hãy đặt cả phần đệm và lề thành "0" cho "UL"

Bước 3a - Thêm thụt lề của riêng bạn

Nếu cần thụt lề trái, hãy sử dụng lề trái. Vì phần đệm hiện được đặt thành "0", nên lề trái có thể được cung cấp một phép đo chính xác sẽ nhất quán trên tất cả các trình duyệt. Ví dụ trên được thụt lề bằng cách sử dụng "lề trái" được đặt thành "1em"

Bước 4 - Thêm hình nền

Hình nền được thêm vào phần tử "LI" bằng cách sử dụng "background-image". Hình nền hiện được lặp lại trên nền của từng mục danh sách - giao diện không đẹp

Bước 5 - Đặt không lặp lại

Để ngăn hình nền lặp lại trong các mục danh sách, hãy đặt "lặp lại nền" thành "không lặp lại". Hiện tại chỉ có một hình ảnh cho mỗi mục danh sách, nhưng chúng sẽ cần được định vị

Bước 6 - Định vị hình ảnh

"Vị trí nền" được sử dụng để định vị hình ảnh sao cho chúng thẳng hàng với văn bản. Trong trường hợp này "0. 4em" được sử dụng. Các đơn vị này đề cập đến vị trí hình ảnh từ "trái" và "trên cùng"

Vị trí trên cùng có thể được đặt thành 50%, điều này sẽ làm cho nó nằm ở giữa mục danh sách. Tuy nhiên, điều này có vẻ không tốt nếu các mục trong danh sách nằm trên hai hoặc nhiều dòng, vì hình ảnh sẽ được căn giữa giữa các dòng. Phương pháp an toàn nhất là xác định vị trí hàng đầu theo em's. Sử dụng phương pháp này, hình ảnh sẽ luôn ở đúng vị trí với văn bản cho dù người dùng chỉ định kích thước phông chữ nào. Các phép đo thực tế được sử dụng cho "trái" và "trên cùng" sẽ phụ thuộc vào hình ảnh

Các hình ảnh hiện được xếp theo chiều ngang với nội dung. Tuy nhiên, nội dung nằm trên đầu hình ảnh

Bước 7 - Di chuyển nội dung

Để di chuyển nội dung ra khỏi hình nền, hãy áp dụng "padding-left" cho phần tử "LI". Trong trường hợp này "0. 6em" đã được sử dụng. Cũng giống như căn chỉnh theo chiều dọc, phần đệm danh sách sẽ được xác định bởi kích thước hình ảnh của bạn

Đã kết thúc

Có nhiều biến thể về phương pháp danh sách cơ bản này

Biến thể - danh sách căn phải

Để tạo một phiên bản danh sách được căn phải, chỉ cần thực hiện ba thay đổi. Đầu tiên, đặt "UL" "text-align" thành "right". Thứ hai, thay đổi "vị trí nền" bên trái từ "0" thành "100%" - làm cho hình ảnh thẳng hàng với cạnh phải. Và cuối cùng thay đổi "padding-left" thành "padding-right"

li
{
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 100% .4em;
padding-right: .6em;
}


Biến thể - đặt độ rộng danh sách

Nếu danh sách không nằm trong hộp chứa, bạn có thể sử dụng "UL" để kiểm soát độ rộng tổng thể của danh sách

li
{
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 100% .4em;
padding-right: .6em;
}


Biến thể - thêm khoảng trống xung quanh các mục danh sách

Có thể thêm khoảng cách giữa mỗi mục danh sách bằng cách đặt lề trên "LI". Có thể đặt lề ở trên cùng, dưới cùng hoặc trên cùng và dưới cùng của từng mục danh sách. Phiên bản này có biên độ ". 1em" ở đầu và cuối danh sách

ul { list-style-type: none; }3

Biến thể - danh sách biểu tượng

Có thể sử dụng nhiều tùy chọn hình nền trong một danh sách. Điều này đạt được bằng cách tạo một lớp cho mỗi biểu tượng và tạo kiểu cho các "LI's" riêng lẻ theo yêu cầu

LI trong CSS là gì?

Phần tử LI là gì?

UL LI A trong CSS là gì?

Kiểu danh sách CSS là gì?