Bạn đã bao giờ muốn thụt lề dòng thứ hai của một mục danh sách thay vì nó xuất hiện ngay bên dưới dấu đầu dòng chưa?  Hôm nay chúng tôi sẽ chỉ cho bạn một cách dễ dàng để làm điều này Lý do điều này xảy ra là do đánh dấu là nội dung nội tuyến nên khi văn bản kết thúc, nó sẽ tiếp tục chảy như bình thường Bạn có thể ngăn chặn hành vi này bằng cách tận dụng lợi thế của
Bằng cách cung cấp thụt lề văn bản phủ định, bạn có thể yêu cầu dòng đầu tiên dịch chuyển một lượng mong muốn sang trái. Nếu sau đó bạn chỉ định một phần đệm dương bên trái, bạn có thể hủy bỏ phần bù này Trong một số trường hợp, bạn có thể muốn tạo danh sách dấu đầu dòng không có dấu đầu dòng hoặc mục danh sách không có dấu đầu dòng. Để tạo danh sách có thứ tự hoặc danh sách không có thứ tự không có dấu đầu dòng (ẩn dấu đầu dòng), hãy làm theo các bước dưới đây ví dụ HTMLAdding the "list-style: none" CSS class to the unordered list (
<ul style="list-style: none;"> <li>List item with no bullet</li> <li>Second item</li> </ul> HTML với ví dụ CSSMặc dù ví dụ trên hoạt động trong hầu hết mọi tình huống, nhưng tốt hơn hết bạn nên đặt CSS trong một tệp bên ngoài, riêng biệt. Dưới đây là CSS và HTML loại bỏ dấu đầu dòng Using the CSS below removes bullets from all unordered links (
<style type="text/css">
ul {
list-style-type: none;
}
</style>Nếu bạn chỉ có ý định có một danh sách, không có dấu đầu dòng hoặc số, thì tốt hơn là tạo một lớp để sử dụng bất cứ lúc nào bạn không muốn dấu đầu dòng <style type="text/css">
.nobull {
list-style-type: none;
}
</style>Trong CSS trên, một lớp mới gọi là "nobull" được tạo. Lớp này sau đó có thể được sử dụng bất cứ lúc nào bạn không muốn có dấu đầu dòng như trong ví dụ bên dưới <ul class="nobull"> <li>List item with no bullet</li> <li>Second item</li> </ul> Mẹo Bạn cũng có thể áp dụng lớp này cho bất kỳ mục nào trong danh sách ( Để tránh bị nhầm lẫn, tôi sẽ bắt đầu lại từ đầu và trình bày một khám phá đầy đủ về những gì đang xảy ra với các danh sách nói chung, và sau đó là trong IE5/Mac và Netscape 6. 1. Tôi nghĩ rằng sẽ có ít cơ hội hiểu lầm theo cách đó Câu hỏi mà tôi đang cố gắng trả lời là "các danh sách được trình duyệt tạo kiểu như thế nào?" . 1 dường như hoạt động giống như vậy khi tạo kiểu danh sách?" Đầu tiên, tôi sẽ bắt đầu với một mục danh sách thuần túy-- không có điểm đánh dấu và không có phần tử danh sách chứa-- treo trong chân không, nghĩa là nó chưa phải là một phần của tài liệu. Hình dung nó trong bố cục lấp lửng, chờ được xây dựng hoàn chỉnh trước khi trình duyệt đưa nó lên màn hình ---------------------- |This is a list item.| ---------------------- Hộp đó đại diện cho khu vực nội dung của mục danh sách. Bây giờ, theo mô hình hộp, hộp này phải được hiển thị trong vùng nội dung của phần tử gốc[1]. Vì vậy, chúng tôi có ------------------------ |----------------------| ||This is a list item.|| |----------------------| ||This is a list item.|| |----------------------| ||This is a list item.|| |----------------------| ------------------------ Chưa có lề hoặc phần đệm nào được đặt cho bất kỳ nội dung nào, do đó hộp bên ngoài là đường viền của UL, hiện tại tương tự như vùng nội dung của nó. Rõ ràng là tôi đang chống lại những hạn chế của nghệ thuật ASCII ở đây, vì vậy tôi phải yêu cầu bạn tưởng tượng rằng "khoảng cách" giữa hộp bên ngoài và các mục trong danh sách không có ở đó, sao cho không có điểm ảnh nào giữa các cạnh của . [2] Bây giờ, giả sử rằng tôi muốn thêm các dấu (dấu đầu dòng) vào các mục trong danh sách. Các điểm đánh dấu được đặt tương ứng với các mục trong danh sách, nhưng chúng KHÔNG thay đổi bố cục của UL. Như vậy ------------------------ |----------------------| *||This is a list item.|| |----------------------| *||This is a list item.|| |----------------------| *||This is a list item.|| |----------------------| ------------------------ Nhìn bề ngoài, các điểm đánh dấu nằm ngoài vùng nội dung của UL, nhưng đó không phải là phần quan trọng ở đây. Các điểm đánh dấu được đặt bên ngoài "hộp chính" của các phần tử LI, không phải UL. Chúng giống như phần phụ của các mục trong danh sách, treo bên ngoài khu vực nội dung của LI nhưng vẫn được gắn vào LI[3] Trên thực tế, chúng tôi khám phá ra trong CSS2. 12. 6. 1 rằng độ lệch giữa điểm đánh dấu và hộp chính của nó được đo giữa các đường viền của hai. Chúng tôi không có bất kỳ đường viền nào ở đây, vì vậy khoảng cách giữa các hộp đánh dấu và hộp LI là 0[4] Được rồi, chúng tôi đang ở trong nhà kéo dài. Bây giờ chúng ta phải tìm ra cách điều này sẽ xuất hiện trong một tài liệu. Hiện tại, chúng tôi có một tình huống tương tự với phong cách ul, li {marign-left: 0; padding-left: 0;}
bởi vì cả các mục trong danh sách và UL đều không có lề trái. Nếu chúng tôi thả danh sách này vào một tài liệu nguyên trạng, thì sẽ không có vết lõm rõ ràng và các điểm đánh dấu sẽ có nguy cơ rơi khỏi cạnh trái của cửa sổ trình duyệt Để tránh điều này và nhận được một số thụt lề, có một số tùy chọn có sẵn cho người triển khai trình duyệt. Họ có thể đặt lề cho các phần tử LI, nhưng đó không phải là điều họ đã làm[5]. Thay vào đó, họ thực thi thụt đầu dòng thông qua các kiểu được đặt trên phần tử UL-- và đó là nơi họ chia tay Trong IE5/Mac, và có lẽ là IE5. x/Win, danh sách được thụt lề bằng cách đặt lề trái là 2. 5em trên phần tử UL. Vì vậy, chúng tôi nhận được ________số 8_______NS6. x, mặt khác, đặt phần đệm là 2. 5em cho phần tử UL, vì vậy chúng tôi kết thúc với ----------------------------- | ----------------------| | *|This is a list item.|| | ----------------------| | *|This is a list item.|| | ----------------------| | *|This is a list item.|| | ----------------------| ----------------------------- Vì vậy, các điểm đánh dấu vẫn được gắn vào các phần tử LI, bất kể chúng ở đâu. Sự khác biệt hoàn toàn nằm ở cách UL được tạo kiểu. Chúng ta chỉ có thể thấy sự khác biệt nếu cố gắng đặt nền hoặc đường viền cho phần tử UL Đây cũng là lý do tại sao các điểm đánh dấu được đặt bên ngoài bất kỳ đường viền nào được đặt cho phần tử LI, giả sử giá trị của 'vị trí kiểu danh sách' là 'bên ngoài'. Nếu nó được thay đổi thành 'bên trong', thì các điểm đánh dấu được đưa vào bên trong nội dung của LI, như thể chúng là một hộp nội tuyến được đặt ở đầu LI. Nó giống như 'hiển thị. run-in' nhưng tôi không chắc nó có giống hoàn toàn không. Đây là lý do tại sao thông số kỹ thuật nói về việc không có thay đổi nào đối với cạnh trái của vị trí phần tử LI giữa việc có điểm đánh dấu bên trong và bên ngoài Đun sôi tất cả, và những gì chúng ta còn lại là cái này. nếu bạn muốn hiển thị danh sách nhất quán giữa Explorer 5. x và Netscape 6. x, bạn cần đặt cả lề trái và phần đệm trái của phần tử UL. Chúng ta có thể bỏ qua LI hoàn toàn cho những mục đích này. Nếu bạn muốn tái tạo màn hình mặc định trong Netscape 6. x, bạn viết ul {margin-left: 0; padding-left: 2.5em;}
Nếu bạn quan tâm hơn đến việc làm theo mô hình Explorer, thì ul {margin-left: 2.5em; padding-left: 0;}
Tất nhiên, bạn có thể điền vào các giá trị ưa thích của riêng bạn. Tách cái khác nhau và đặt cả hai thành 1. 25em, nếu bạn thích. Nếu bạn muốn đặt lại danh sách để không có thụt đầu dòng, thì bạn vẫn phải loại bỏ cả phần đệm và lề ul {margin-left: 0; padding-left: 0;}
Kết quả cuối cùng là không có trình duyệt nào đúng hay sai về cách trình bày các danh sách (và nếu tôi nhớ không nhầm, thì cuộc thảo luận này đã được châm ngòi bởi một nhận xét ngụ ý rằng Netscape không "hiểu đúng"). Hai trình duyệt mà tôi đã thảo luận nhất quán về thuật ngữ CSS, nhưng không sử dụng cùng kiểu mặc định. Phải mất một thời gian và một số tệp thử nghiệm, tôi mới hoàn toàn nghĩ ra điều này trong đầu và tôi muốn cảm ơn Al và Ian vì đã khuyến khích tôi thực hiện cuộc hành trình ============= Chú thích cuối trang ============= [1] Tôi đang bỏ qua các tác động tiềm ẩn của lợi nhuận âm ở đây, vì đó là một cuộc thảo luận khác (và phức tạp tương tự) [2] Cuối cùng, tôi nghĩ rằng tôi sẽ biến bài viết này thành một bài báo dựa trên Web để tôi có thể sử dụng ảnh GIF để hiển thị các ví dụ, nhưng điều đó để sau [3] Thật khó để so sánh các điểm đánh dấu với bất kỳ thứ gì khác trong CSS, ngoại trừ các phần tử có thể được định vị tuyệt đối, nhưng tôi thực sự không muốn đến đó vì ngay cả khi đó là một kết hợp không chính xác [4] Chúng tôi có thể vẽ các hộp nhỏ xung quanh các điểm đánh dấu, nhưng điều đó sẽ làm phức tạp bức tranh một cách không cần thiết [5] Tự mình thử. tạo một danh sách (hoặc một tập hợp các danh sách lồng nhau) và sau đó khai báo 'li {margin-left. 0;}'. Nếu bố cục không thay đổi so với định mức, thì bạn biết rằng các mục danh sách không có lề trái theo mặc định |
