Danh sách được sắp xếp có thể tạo ra kết quả giống như 1.1, 1.2, 1.3 (thay vì chỉ 1, 2, 3, lỗi) với css không?

201

Danh sách được sắp xếp có thể tạo ra kết quả giống như 1.1, 1.2, 1.3 (thay vì chỉ 1, 2, 3, ...) bằng CSS không? Cho đến nay, việc sử dụng list-style-type:decimalchỉ tạo ra 1, 2, 3 chứ không phải 1.1, 1.2., 1.3.

html css

— Richard77
nguồn

Tôi đề nghị so sánh câu trả lời được chấp nhận với câu trả lời của Jakub Jiruska. Tôi nghĩ rằng sau này thậm chí còn tốt hơn nhiều.

— Frank Conijn

Giải pháp thanh lịch. Bất cứ ý tưởng tại sao Wikipedia sử dụng một ul cho các phần nội dung của nó thay vì điều này?

— Mattypants

1

@davnicwil Tôi đồng ý; Có vẻ như tôi có thể vừa áp dụng bản sao theo thứ tự sai vào tháng 9.

— TylerH

Thật tuyệt, bây giờ tôi cảm thấy lúng túng vì nó chưa bao giờ xảy ra với tôi, đó có thể là một lỗi đơn giản như thế - xin lỗi!

— davnicwil

289

Bạn có thể sử dụng quầy để làm như vậy:

Các số bảng kiểu sau đây lồng các mục danh sách như "1", "1.1", "1.1.1", v.v.
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

Thí dụ

ol { counter-reset: item }
li{ display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }

<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>

Mở rộng đoạn trích

Xem quầy và phạm vi lồng nhau để biết thêm thông tin.

— cây mướp tây
nguồn

2

câu trả lời chính xác. Sự hỗ trợ cho việc này là gì?

— Jason McCreary

1

@Jason McCreary: Chà, đó là nhược điểm : Bộ đếm không được hỗ trợ trong IE cho đến phiên bản 8 .

— Gumbo

3

Giải pháp này bỏ lỡ một điều nhỏ: dấu chấm sau số mục. Nó không giống như kiểu danh sách tiêu chuẩn. Khắc phục bằng cách thêm một dấu chấm vào quy tắc cho li:before: content: counters(item, ".")". ";

— LS

4

Đây là một câu trả lời kém. Nó không hoạt động đúng. Kiểm tra câu trả lời của Jakub Jiruska bên dưới

— Mr Pablo

1

@Gumbo Tôi biết, và câu trả lời của Jakub đã cho tôi cách đánh số chính xác.

— Ông Pablo

236

Không có giải pháp nào trên trang này hoạt động chính xác và phổ biến cho tất cả các cấp độ và đoạn văn dài (được bao bọc). Thật sự khó khăn để đạt được một vết lõm nhất quán do kích thước thay đổi của điểm đánh dấu (1., 1.2, 1.10, 1.10.5, khắc); Nó không thể chỉ là giả mạo, mà thậm chí không có lề / phần đệm được tính toán trước cho mỗi cấp độ thụt đầu dòng có thể.

Cuối cùng tôi đã tìm ra một giải pháp thực sự hoạt động và không cần bất kỳ JavaScript nào.

Nó đã được thử nghiệm trên Firefox 32, Chromium 37, IE 9 và Trình duyệt Android. Không hoạt động trên IE 7 và trước đó.

CSS:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

Thí dụ:

Hãy thử nó trên JSFiddle , rẽ nhánh trên Gist .

— Jakub Jiruska
nguồn

1

Tốt công việc đạt được loại sự chú ý này. Tuy nhiên, tôi vẫn sẽ tranh luận rằng 2 trường hợp đầu tiên thụt mà bạn đã liệt kê là vấn đề ưu tiên hơn là đúng và sai. Xem xét trường hợp 1 và trường hợp 2 - cái sau quản lý để ép ở nhiều cấp độ hơn trước khi khoảng cách trở nên khó sử dụng, trong khi vẫn trông khá gọn gàng. Hơn nữa, MS Word và kiểu trình duyệt mặc định cả hai trường hợp sử dụng thụt lề 2. Tôi đoán họ cũng đang làm sai?

— Saul Fautley

2

@ saul-fautley Đó là sai về kiểu chữ. Ví dụ của bạn với số cấp độ lồng nhau điên rồ chứng tỏ rằng việc đánh số lồng nhau không phù hợp với quá nhiều cấp độ, nhưng điều đó khá rõ ràng. MS Words không phải là một hệ thống sắp chữ, nó chỉ là một bộ xử lý tài liệu với kiểu chữ kém. Kiểu dáng trình duyệt mặc định, oh, bạn không biết nhiều về kiểu chữ, phải không?

— Jakub Jiruska

3

Nó thực sự hoạt động (về mặt kỹ thuật) cho tất cả các cấp độ và đoạn văn dài. Nếu nó hợp lý để sử dụng hàng tá cấp độ, đó là một câu hỏi khác không liên quan đến giải pháp kỹ thuật. Vấn đề là bạn không phải xác định trước một quy tắc CSS cho từng cấp độ lồng nhau như với một số giải pháp khác.

— Jakub Jiruska

4

Mặc dù tôi không nói có bất cứ điều gì vốn đã "sai" với các câu trả lời khác, tôi sẽ nói rằng chúng không đầy đủ. Câu trả lời này là tại chỗ, và thậm chí làm việc trong một trang web có phong cách kỳ lạ mà tôi đang sửa đổi.

— DanielM 30/03/2015

2

@tremby: Sự khác biệt có thể được giải quyết bằng cách làm cho li sử dụng "display: table-row" thay vì "display: table". Vấn đề mà điều này mang lại là li sau đó không thể sử dụng bất kỳ lề / phần đệm nào vì các hàng của bảng luôn được định cỡ tự động theo nội dung của chúng. Điều này có thể được giải quyết bằng cách thêm "li: after" với "display: block". Xem jsFiddle cho một ví dụ đầy đủ. Như một phần thưởng bổ sung, tôi đã thêm "text-align: right" vào "li: before" để làm cho các số được căn chỉnh đúng.

— mmlr

64

Câu trả lời được chọn là một khởi đầu tuyệt vời, nhưng về cơ bản, nó buộc list-style-position: inside;kiểu dáng trên các mục danh sách, làm cho văn bản được bọc khó đọc. Đây là một cách giải quyết đơn giản cũng cho phép kiểm soát lề giữa số và văn bản và căn chỉnh đúng số theo hành vi mặc định.

ol {
    counter-reset: item;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}

Mã thông báo: http://jsfiddle.net/3J4Bu/

— Saul Fautley
nguồn

Một nhược điểm là nó thêm một khoảng thời gian vào cuối mỗi mục danh sách.

— Davin

3

@Davin Studer: Nó chỉ thêm một khoảng thời gian vào cuối mỗi số, theo olhành vi mặc định . Nó có thể dễ dàng được gỡ bỏ bằng cách xóa cái cuối cùng "."khỏi contenttài sản, nhưng điều này có vẻ hơi kỳ lạ đối với tôi.

— Saul Fautley

14

Các giải pháp được đăng ở đây không hoạt động tốt đối với tôi, vì vậy tôi đã thực hiện hỗn hợp các câu hỏi này và câu hỏi sau: Có thể tạo danh sách đa cấp theo thứ tự trong HTML không?

/* Numbered lists like 1, 1.1, 2.2.1... */
ol li {display:block;} /* hide original list counter */
ol > li:first-child {counter-reset: item;} /* reset counter */
ol > li {counter-increment: item; position: relative;} /* increment counter */
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;} /* print counter */

Kết quả:

ảnh chụp màn hình

Lưu ý: ảnh chụp màn hình, nếu bạn muốn xem mã nguồn hoặc bất cứ thứ gì từ bài đăng này: http://estiloasertivo.blogspot.com.es/2014/08/int sinhcion-rucky-lean-y-lean.html

— chelder
nguồn

1

Đây là câu trả lời tốt nhất (và đơn giản nhất) từ toàn bộ trang.

— Bruno Toffolo

6

Lưu ý: Sử dụng CSS để tạo đánh số lồng nhau trong trình duyệt hiện đại. Xem câu trả lời được chấp nhận. Sau đây chỉ dành cho lợi ích lịch sử.counters

Nếu trình duyệt hỗ trợ contentvà counter,

.foo {
  counter-reset: foo;
}
.foo li {
  list-style-type: none;
}
.foo li::before {
  counter-increment: foo;
  content: "1." counter(foo) " ";
}

<ol class="foo">
  <li>uno</li>
  <li>dos</li>
  <li>tres</li>
  <li>cuatro</li>
</ol>

Mở rộng đoạn trích

— kennytm
nguồn

Giải pháp này thất bại khủng khiếp khi các danh sách được lồng nhau.

— LS

@LS Bạn luôn có thể chứa các bộ chọn phù hợp với nhu cầu của bạn. .foo > ol > li.

— kennytm

1

Quan điểm của tôi là bạn đã mã hóa "1." vào phong cách. Điều gì xảy ra khi danh sách con là con của mục thứ hai trong danh sách cha? Bạn muốn nó xuất hiện dưới dạng "2.", nhưng nó sẽ luôn là "1." bởi vì cách nó được mã hóa ở đây. Giải pháp là gì? Tạo bộ kiểu mới cho mọi số có thể? Không. Sử dụng counters()hàm như trong các ví dụ trên thay vì counter()hàm.

— LS

2

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="author" content="Sandro Alvares - KingRider">
    </head>
    <body>
        <style type="text/css">
            li.title { 
                font-size: 20px; 
                font-weight: lighter; 
                padding: 15px; 
                counter-increment: ordem; 
            }
            .foo { 
                counter-reset: foo; 
                padding-left: 15px; 
            }
            .foo li { 
                list-style-type: none; 
            }
            .foo li:before { 
                counter-increment: foo; 
                content: counter(ordem) "." counter(foo) " "; 
            }
        </style>
        <ol>
            <li class="title">TITLE ONE</li>
            <ol class="foo">
                <li>text 1 one</li>
                <li>text 1 two</li>
                <li>text 1 three</li>
                <li>text 1 four</li>
            </ol>
            <li class="title">TITLE TWO</li>
            <ol class="foo">
                <li>text 2 one</li>
                <li>text 2 two</li>
                <li>text 2 three</li>
                <li>text 2 four</li>
            </ol>
            <li class="title">TITLE THREE</li>
            <ol class="foo">
                <li>text 3 one</li>
                <li>text 3 two</li>
                <li>text 3 three</li>
                <li>text 3 four</li>
            </ol>
        </ol>
    </body>
</html>

Kết quả: http://i.stack.imgur.com/78bN8.jpg

— KingRider
nguồn

2

Tôi có một số vấn đề khi có hai danh sách và danh sách thứ hai nằm trong DIV Danh sách thứ hai nên bắt đầu từ 1. không phải 2.1

<ol>
    <li>lorem</li>
    <li>lorem ipsum</li>
</ol>

<div>
    <ol>
        <li>lorem (should be 1.)</li>
        <li>lorem ipsum ( should be 2.)</li>
    </ol>
</div>

http://jsfiddle.net/3J4Bu/364/

EDIT: Tôi đã giải quyết vấn đề bằng cách này http://jsfiddle.net/hy5f6161/

— robertad
nguồn

1

Trong tương lai gần, bạn có thể sử dụng ::markerphần tử psuedo để đạt được kết quả tương tự như các giải pháp khác chỉ trong một dòng mã.

Hãy nhớ kiểm tra Bảng tương thích trình duyệt vì đây vẫn là một công nghệ thử nghiệm. Tại thời điểm chỉ viết Firefox và Firefox cho Android, bắt đầu từ phiên bản 68, hỗ trợ này.

Đây là đoạn mã sẽ hiển thị chính xác nếu được thử trong trình duyệt tương thích:

::marker { content: counters(list-item,'.') ':' }
li { padding-left: 0.5em }

<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>

Mở rộng đoạn trích

Bạn cũng có thể muốn xem bài viết tuyệt vời này bằng cách smashingmagazine về chủ đề này.

— bạo ngược
nguồn

0

Tôi cần thêm phần này vào giải pháp được đăng trong 12 vì tôi đang sử dụng một danh sách với hỗn hợp danh sách được sắp xếp và các thành phần danh sách không theo thứ tự. Nội dung: không có trích dẫn có vẻ như là một điều kỳ lạ để thêm tôi biết, nhưng nó hoạt động ...

ol ul li:before {
    content: no-close-quote;
    counter-increment: none;
    display: list-item;
    margin-right: 100%;
    position: absolute;
    right: 10px;
}

— benjarlett
nguồn

0

Sau đây làm việc cho tôi:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ") ";
  display: table-cell;
  padding-right: 0.6em;
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") ") ";
}

Nhìn vào: http://jsfiddle.net/rLebz84u/2/

hoặc cái này http://jsfiddle.net/rLebz84u/3/ với nhiều văn bản hợp lý

— wonka willy
nguồn

Lãng phí thời gian để xem xét. Gần giống với một câu trả lời trước đó. Chỉ có sự khác biệt là ")" đã được thêm vào cuối điểm đánh dấu.

— juanitogan

0

Đây là mã thích hợp nếu bạn muốn thay đổi kích thước con của css khác.

<style>
    li.title { 
        font-size: 20px; 

        counter-increment: ordem; 
        color:#0080B0;
    }
    .my_ol_class { 
        counter-reset: my_ol_class; 
        padding-left: 30px !important; 
    }
    .my_ol_class li { 
          display: block;
        position: relative;

    }
    .my_ol_class li:before { 
        counter-increment: my_ol_class; 
        content: counter(ordem) "." counter(my_ol_class) " "; 
        position: absolute;
        margin-right: 100%;
        right: 10px; /* space between number and text */
    }
    li.title ol li{
         font-size: 15px;
         color:#5E5E5E;
    }
</style>

trong tệp html.

        <ol>
            <li class="title"> <p class="page-header list_title">Acceptance of Terms. </p>
                <ol class="my_ol_class">
                    <li> 
                        <p>
                            my text 1.
                        </p>
                    </li>
                    <li>
                        <p>
                            my text 2.
                        </p>
                    </li>
                </ol>
            </li>
        </ol>

— cát kumar
nguồn