CSS - kích thước phông chữ con sử dụng em

Cách hiệu quả nhất để làm cho tất cả các mục danh sách lồng nhau có cùng kích thước khi sử dụng một em không bằng 1. Ví dụ, tôi muốn tất cả các li trong danh sách này có kích thước đến 0,85em của cha mẹ của ul. Tôi có phải tạo một lớp riêng biệt cho mỗi "mức độ" của chiều sâu không?CSS - kích thước phông chữ con sử dụng em

<html> 
<head> 
    <style type="text/css"> 
     li 
     { 
      font-size: 0.85em; 
     } 
    </style> 
</head> 
<body> 
    <ul> 
     <li>Level 1 item 
      <ul> 
       <li>Level 2 item 
        <ul> 
         <li>Level 3 item</li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</body> 
</html>

Nguồn

2009-07-23 Jeremy

Nên hoạt động.

li li {font-size: 100%;}

Nguồn

2009-07-23 20:36:38 Matt

Nó có, nhưng nó không phải là cách hiệu quả nhất. –

@Bobby, tại sao nó không phải là cách hiệu quả nhất? – You

Nếu không thêm đánh dấu thêm vào trang của bạn thì đây là cách dễ nhất. – Matt

Tôi muốn tất cả của li trong danh sách này để được kích thước để 0.85em của công ty mẹ của ul

body > ul { font-size: 0.85em; }

sẽ làm điều đó

Nguồn

2009-07-23 20:09:16

-1

li { font-size: 0.85em; } 
li li { font-size: 1em; }

Nguồn

2009-07-23 20:12:33 Quentin

Khuyến cáo của tôi sẽ được cung cấp <ul> một id hoặc lớp đầu tiên và đặt font-size tại đó.

Nguồn

2009-07-23 20:12:34 jimyi

(câu trả lời này giả định bạn muốn tất cả li-yếu tố kích thước tương tự (bạn nói cả mà bạn muốn kích thước tương tự, và kích thước khác nhau trong câu hỏi))

thác Font-size, vì vậy nếu bạn chỉ đặt nó trên phần tử bên ngoài (nói một div wrapper hoặc một cái gì đó), tất cả mọi thứ bên trong nó sẽ nhận được một bước nhỏ hơn như (tôi nghĩ) bạn muốn.

<div id="navigation"> 
    <ul> 
     <li>...</li> 
     <li> 
     <ul><li>...</li><li>...</li></ul> 
     </li> 
    </ul> 
</div> 

#navigation { font-size: 0.85em; }

Nguồn

2009-07-23 20:12:43

Ví dụ ở trên hoạt động như mong đợi. Ngay cả trong IE6, không hỗ trợ bộ chọn con. –

True - Tôi đang làm việc với HTML mà anh ấy cung cấp cho chúng tôi. Anh ta không chỉ định khả năng tương thích của trình duyệt, vì vậy tôi giả sử anh ta muốn một cái gì đó tuân thủ thông số CSS2.1. –

Trong câu hỏi nào anh ta nói rằng anh ta muốn chúng có kích thước khác nhau? –

Tôi đồng ý với Emil và sẽ bỏ phiếu cho anh ấy nếu tôi có đủ điểm đại diện (n00b ở đây). Tôi sẽ sử dụng một lớp như anh ta đề cập trong điểm đầu tiên của mình, vì vậy nó có thể sử dụng lại trong cùng một tài liệu. Nếu bạn muốn qua trình duyệt và đang sử dụng spec css hiện tại thì tôi không thể đề xuất một ví dụ thế giới thực tốt hơn ..... cuộn trên css 3 và cái chết của IE6!

Nguồn

2009-07-23 21:21:47 Crayonz

Cảm ơn sự hỗ trợ đạo đức! :) –

Làm thế nào tôi sẽ làm điều đó, và tôi nghĩ rằng nó là không công bằng để đánh dấu bạn xuống cho thực sự là đúng và đưa ra lời khuyên tốt – Crayonz

Sử dụng đơn vị "rem" để định kích thước phông chữ. Điều này khắc phục sự cố thừa kế phông chữ.

Johnathan Snook có great article về điều này.

Nguồn

2011-07-09 21:16:53 chotchki

Vâng, nó thực sự là phương pháp tốt nhất. Tôi chỉ có thể thêm bạn nên sử dụng giá trị giảm dần bằng pixel. Như thế này: li {font-size: 8.5px; font-size: 0.85em;} Và bạn nên đặt kích thước phông chữ cơ bản không phải trên phần tử cơ thể như thường nhưng trên html. –

@MikeEshva: ví dụ css của bạn phải là {font-size: 8.5px; font-size: 0.85rem;} – chotchki

vâng, thứ tự quan trọng! –

CSS - kích thước phông chữ con sử dụng em

Trả lời

Các vấn đề liên quan