2011-12-09 41 views
17

Có cách nào để tăng kích thước của chỉ kiểu danh sách dấu đầu dòng bằng cách sử dụng CSS không? Tôi không muốn tăng kích thước của văn bản dấu đầu dòng, chỉ là kiểu dấu đầu dòng. Tôi không thể sử dụng hình ảnh hoặc JavaScript. Nó phải là thứ tôi có thể nhúng bên trong các thẻ <style> trong thẻ <head>.Tăng kích thước kiểu danh sách kiểu dấu đầu dòng

Trả lời

17

Có thể không làm việc trong phiên bản cũ của trình duyệt IE.

li:before{ content:'\00b7'; font-size:100px; }

Demo

Đối với IE6:

Nếu không có javascript hoặc hình ảnh, tôi sẽ khuyên bạn nên đặt một <span>&#183;</span> trong đầu mỗi mục trong danh sách và phong cách đó.

+1

+1 ví dụ tuyệt vời (dọc-align: trung thực sự CRUCIAL ở đây. Đẹp)!cũng insted của "\ 00b7" có thể sử dụng "•" :) –

+0

Tôi thường sử dụng các giá trị hex thoát, như tôi đã có một số rắc rối trước khi sử dụng biểu tượng. Ví dụ, điều này: 'span: before {content:" "";} 'không hoạt động, nhưng điều này:' span: before {content: "\ 0022";} 'hiện. – bookcasey

+0

Cảm ơn, bookcasey. mặc dù tôi không thể sử dụng ': before' vì nó chỉ dành cho trang web chỉ có IE6 – Chris22

0

Khi bạn nói bạn không thể sử dụng hình ảnh, bạn có nghĩa là bạn không thể chỉnh sửa các thẻ li để thêm hình ảnh hoặc bạn hoàn toàn không thể sử dụng hình ảnh?

Trên các yếu tố li, bạn có thể đặt thuộc tính list-style-image.

li { 
list-style-image: url('/imagepath.png'); 
} 

Điều này vẫn có thể nằm trong thẻ đầu của bạn mà không chỉnh sửa đánh dấu danh sách.

+0

cảm ơn, Brandon. Tôi không thể sử dụng hình ảnh. – Chris22

+0

Tìm thấy http://stackoverflow.com/questions/7563344/how-can-i-increase-the-bullet-size-in-a-li này. Tôi sẽ xem xét thêm vào nó. Mặc dù tôi không thể sử dụng javascript. Đó là một ứng dụng thực sự cũ để sử dụng đặc biệt. – Chris22

0

không có cách nào mà tôi biết.

nhưng bạn có thể giả mạo nó bằng cách sử dụng: trước

ul,li{list-style:none;} 
li:before{content:"o";font-weight:bold;} 
+0

Cảm ơn, Kae. Đó là cho một trang web IE6 vì vậy không thể sử dụng 'trước' – Chris22

0

đặt bất kỳ màu nền nào cho thẻ (ví dụ: .menu li a) và thêm đệm cho bạn sẽ nhận được như một hộp rồi bán kính đường viền và sau đó để (.menu li) áp dụng đệm cho trái và phải cho khoảng trắng ... (được giải thích theo thứ tự ngược lại)

#header .nav-primary ul li{float:left;display:block;margin:0;padding:0 22px;} 
#header .nav-primary ul li a{text-decoration:none;color:#030;background:#CBCBCB;border-radius:5px;padding:5px 0px;} 
3

Tôi phải làm điều tương tự. Phương pháp của tôi là để thêm một thẻ div xung quanh dòng chữ trong li:

<li><span>Item 1</span></li> 
<li><span>Item 1</span></li> 

Sau đó, bạn có thể tăng font-size của bạn li và giảm kích thước phông chữ của nhịp của bạn:

li { 
    font-size: 20px; 
} 
li span { 
    font-size: 14px; 
} 

Bạn có thể cần phải điều chỉnh chiều cao và lề đường để phù hợp với việc tăng kích thước li. Nhưng phương pháp này cũng sẽ cho phép bạn tô màu các viên đạn tách biệt với văn bản.

+1

Tính năng này hoạt động tốt để tạo kiểu cho dấu đầu dòng trong email vì bạn có thể sử dụng kiểu nội dòng cho chúng. Oh kinh dị của email HTML! :) – Tessa

0

Đã tìm kiếm giải pháp cho vấn đề này và thấy rằng nếu bạn lồng vào bên trong, bạn có thể tạo kiểu cho dấu đầu dòng và dấu đầu dòng một cách riêng biệt.

<div> 
    <ul> 
    <li><p>Hello</p></li> 
    </ul> 
</div 

div ul li { 
/*this will style the bullets*/ 
} 

div ul li p { 
/*this will style the text*/ 
} 
Các vấn đề liên quan