Bạn có thể sử dụng các hình ảnh biểu tượng khác nhau cho mỗi phần tử danh sách trong một danh sách không có thứ tự không?

Question

Tôi không phải là người dùng CSS nâng cao, nhưng tôi có kiến ​​thức làm việc phong phú. Tôi đang cố gắng tạo một danh sách không có thứ tự sử dụng các biểu tượng khác nhau cho từng phần tử danh sách. Tôi cũng thích màu nền của phần tử danh sách để thay đổi khi di chuột.

Có cách nào để thực hiện điều này thông qua CSS hay bạn chỉ bao gồm hình ảnh biểu tượng trong phần tử danh sách (như dưới đây)?

<li><img src="voters.jpg"><a href="voters.html">Voters</a></li> 

Sử dụng list-style-image trên ul mức làm cho tất cả các biểu tượng giống nhau, và tôi đã không thể tìm ra một cách khác. Hầu hết các ví dụ tôi tìm thấy đều dạy bạn cách sử dụng hình ảnh trong danh sách, nhưng chỉ khi hình ảnh có dấu đầu dòng giống nhau. Tôi chắc chắn sẽ mở các đề xuất và cải tiến về cách tôi đang cố gắng thực hiện điều này.

nhờ

<div class="content-nav"> 
    <ul> 
    <li class="instructions"><a href="instructions.html">Instructions</a></li> 
    <li class="voters"><a href="voters.html">Voters</a></li> 
    </ul> 
</div> 

.content-nav { 
    font-size:12px; 
    width:160px; 
    z-index:0; 
} 

.content-nav ul { 
    padding:0 20px; 
    margin:30px 0; 
} 

.content-nav li { 
    padding:5px; 
    margin:5px 5px; 
} 

.content-nav li a { 
    color:#666; 
    text-decoration:none; 
} 

.content-nav li.voters a { 
    background:#FFF; 
    color:#666; 
    text-decoration:none; 
    list-style-image:url(images/voters.jpg); 
} 

.content-nav li.voters a:hover { 
    background:#0CF; 
    color:#000; 
} 

.content-nav li.instructions a { 
    background:#FFF; 
    color:#666; 
    text-decoration:none; 
    list-style-image:url(images/voters.jpg); 
} 

.content-nav li.instructions a:hover { 
    background:#0CF; 
    color:#000; 
} 

Answer 1

Bạn có thể thêm hình nền vào từng phần tử danh sách và sử dụng phần đệm để đẩy văn bản ra khỏi nó.

<ul> 
    <li class="li1">List 1</li> 
    <li class="li2">List 2</li> 
</ul> 

.li1 { 
    background:url('li1.gif') 50% 50% no-repeat no-repeat; 
    padding-left: 5px; 
} 
.li2 { 
    background:url('li2.gif') 50% 50% no-repeat no-repeat; 
    padding-left: 5px; 
} 

Chỉ cần chắc chắn rằng các padding-left là kích thước tương tự như hình ảnh (hoặc lớn hơn một chút nếu bạn muốn khoảng cách)

Answer 2

tôi sẽ đề nghị sử dụng các biểu tượng như background-hình ảnh cho mỗi phần tử trong danh sách. Với cách tiếp cận này, bạn có thể dễ dàng xác định vị trí các "dấu đầu dòng" (đặc biệt là vị trí ngang).

Answer 3

Nếu bạn muốn sử dụng các biểu tượng khác nhau cho từng danh sách, thay vì đặt cho mỗi danh sách một tên duy nhất và sử dụng hình nền và định vị nó một cách thích hợp trong CSS.

Answer 4

Bạn cố gắng đặt thuộc tính list-style-image trên thành phần a. Thay vào đó, hãy thử đặt nó trên thành phần li.

Answer 5

Sử dụng :nth-child() selector CSS3, không yêu cầu đánh dấu thêm vào mỗi phần tử <li>:

Live Demo

HTML:

<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
</ul> 

CSS:

ul li:nth-child(1) { 
    list-style-image: url('http://google-maps-icons.googlecode.com/files/teal01.png'); 
} 
ul li:nth-child(2) { 
    list-style-image: url('http://google-maps-icons.googlecode.com/files/teal02.png'); 
} 
ul li:nth-child(3) { 
    list-style-image: url('http://google-maps-icons.googlecode.com/files/teal03.png'); 
} 

Hỗ trợ trình duyệt: IE9 +, FF3.5 +, SA3.1 +, OP9.5 +, CH2 +