hiển thị flex bên trong phần tử li ẩn số

Tôi cần sử dụng display: flex cho phần tử li trong danh sách có thứ tự. Vấn đề là flex sẽ ẩn đánh số danh sách. Dưới đây là ví dụ: http://jsfiddle.net/pzpeam7o/hiển thị flex bên trong phần tử li ẩn số

Tôi đang sử dụng các nhịp bên trong phần tử li. Flex cho phép hành vi tốt hơn khi thay đổi kích thước trang.

HTML:

<!DOCTYPE html> 

<head lang="en"> 
    <title></title> 
    <link rel="stylesheet" href="style.css"/> 
</head> 
<body> 
    <ul> 
     <li class="lst"> First item</li> 
     <li class="lst"> Second item</li> 
     <li class="lst"> Third item</li> 
     <li class="lst"> Fourth item</li> 
    </ul> 
</body>

CSS:

.lst { 
    list-style-type: decimal; 
    display: flex; 
}

Nguồn

2014-09-19 DMSilva

Bạn có đề cập đến lý do chính xác bạn cần * hiển thị flex không? – LcSalazar

@LcSalazar: đó chính là câu hỏi của tôi. – Devin

Tôi đang sử dụng các nhịp bên trong phần tử li. Flex cho phép hành vi tốt hơn khi thay đổi kích thước trang. – DMSilva

Vâng, đối với người mới bắt đầu bạn có khái niệm flex model sai. Các display:flex đi không vào các mục nhưng trên khối container, như vậy trong trường hợp của bạn, nó phải ở trong <UL>, như thế này:

ul { 
    display: flex; 
} 
.lst { 
    list-style-type: decimal; 
    margin:auto; 
}

Bây giờ, nếu bạn kiểm tra this Fiddle, bạn sẽ thấy số bạn ở đó. Tin xấu: có một documented bug trong Mozilla và không hoạt động với Firefox, nó chỉ hiển thị 0.

Vì vậy, với tất cả điều này được nói, tôi khuyên bạn nên bỏ mô hình Flex trong trường hợp này hoặc thay đổi cách tiếp cận (tại sao không sử dụng divs với một bộ đếm?) bởi vì bạn đang tìm kiếm các vấn đề trình duyệt rắc rối và chéo không xứng đáng với bất kỳ giải pháp họ có thể cung cấp

EDIT: Bây giờ tôi thấy LcSalazar's câu trả lời và ông cũng gợi ý quầy mặc dù với một cách tiếp cận khác, vì vậy tôi nghĩ rằng bạn có thể thử chơi với câu trả lời của tôi cộng với LcSalazar của truy cập và có được một kết quả trình duyệt chéo trong khi vẫn sử dụng mô hình flex đầy đủ. Có thể đấy.

Nguồn

2014-09-19 21:38:55 Devin

tôi đã hoàn toàn không biết tại sao nó giấu nó ... nhưng ...

Một giải pháp có thể được chế giễu danh sách số thập phân với số CSS Counter, được đặt với một số :before giả trên mục danh sách. Bằng cách này, bạn có số display: flex và số của bạn vẫn ở đó ...

Thậm chí tốt hơn, nếu bạn chỉ muốn tạo kiểu cho các số khác nhau, bạn có thể !!

body { 
 
    counter-reset: section; 
 
} 
 

 
.lst { 
 
\t display: flex; 
 
} 
 

 
.lst:before { 
 
    counter-increment: section; 
 
    content: counter(section) "."; 
 
    position: absolute; 
 
    margin-left: -20px; 
 
}

<ul> 
 
    <li class="lst"> First item</li> 
 
    <li class="lst"> Second item</li> 
 
    <li class="lst"> Third item</li> 
 
    <li class="lst"> Fourth item</li> 
 
</ul>

Nguồn

2014-09-19 21:25:05 LcSalazar

Tôi nghĩ bạn sẽ cần phải thêm kiểu danh sách kiểu: không cho Safari, nhưng ý tưởng hay, tuy nhiên, +1 cho bạn. 1 điều mặc dù: Như tôi đã đề cập trong câu trả lời của tôi, hiển thị flex đi trong ul, không phải là li – Devin

Cảm ơn, điều này đã giúp tôi rất nhiều. –

hiển thị flex bên trong phần tử li ẩn số

Trả lời

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