làm cách nào tôi có thể hiển thị số trên danh sách được sắp xếp nội tuyến?

tôi có một danh sách ..làm cách nào tôi có thể hiển thị số trên danh sách được sắp xếp nội tuyến?

<ol> 
    <li>Login</li> 
    <li>Address</li> 
    <li>Shipping</li> 
</ol>

Nó cho thấy những con số thập phân tốt, nhưng khi tôi đặt <li> nội tuyến hoặc inline-block, những con số biến mất! Tôi thấy những nơi khác trực tuyến đã đề cập rằng tôi phải đảm bảo rằng tôi có đủ lề và đệm .. và tôi chắc chắn rằng tôi làm (10 px của mỗi!) Có lý do nào khác khiến các con số có thể biến mất không? Tôi biết từ firebug rằng ngay sau khi tôi bỏ chọn 'inline' họ trở lại ...

css là

ol{ 
padding: 20px; 
list-style-type:decimal; 
} 
ol li { 
display: inline; 
margin: 0 10px; 
padding: 0 10px; 
}

Nguồn

2011-01-10 Damon

Hãy thử tăng giá trị lợi nhuận và xem nếu nó làm cho bất kỳ sự khác biệt – programmer

Chỉ cần được triệt để, bạn đã cố gắng hơn 10px? – jtbandes

Tôi không biết tại sao điều này xảy ra, nhưng nó có thể được giải quyết bằng cách thả nổi trái thay vì display:inline

Xem http://www.jsfiddle.net/CMKzK/

ol{ 
padding: 20px; 
    list-style-type:decimal; 

} 
ol li { 
float:left; 
margin: 0 10px; 
padding: 0 10px; 
}

Nguồn

2011-01-10 05:29:12

Đó là khá không công bằng, chỉ nổi cho bố trí như vậy – baldrs

tập trung nội dung động nổi có thể chỉ là không thể –

Nếu bạn không quan tâm về các phiên bản cũ của trình duyệt IE, bạn có thể sử dụng automatic counters and numbering

Nếu không, bạn nên chỉ định các số theo cách thủ công (@ giải pháp của Babiker) hoặc float giải pháp (@Eric Fortis ') của li.

Nguồn

2011-01-10 05:41:00 zzzzBov

Điều này là tuyệt vời ... Cách tốt hơn so với phao nổi! Tôi không thể tin được bao lâu tôi đã là một nhà phát triển front-end và không biết về điều này ... :( –

tôi đã nhận được xung quanh các vấn đề về số ol bị đẩy xung quanh bởi các yếu tố trái nổi như sau:

li { 
    overflow:hidden; 
    list-style-position: inside; 
    display:block; 
} 
.number { 
    display:list-item; 
    position:absolute; 
} 
.first-item { 
    float:left; 
    /* revise margin to your needs */  
    margin-left:35px; 
} 
.second-item { 
    float:left; 
}

cho DOM sau:

<ol id="playlist"> 

     <li> 
      <div class="number"></div> 
      <a class="first-item" href="#">click here</a> 
      <div class="second-item">some detail</div> 
     </li> 
</ol>

dường như làm việc với inline cũng như các yếu tố khác.

Nguồn

2012-08-29 19:52:18 hedgehog

Điều này dường như không được làm việc với IE11.Tất cả các số danh sách mục là 1. – Tom

Bạn có thể thử này:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>Inline OL</title> 
    <style type="text/css"> 
     ol 
     { 
      /* List will start at 25 + 1 = 26 */ 
      /* Remove the 25 if you want to start at 1 */ 
      counter-reset: LIST-ITEMS 25; 
     } 

     li 
     { 
      display: inline; 
      padding-right: 0.5em; 
     } 

     li:before 
     { 
      content: counter(LIST-ITEMS) "."; 
      counter-increment: LIST-ITEMS; 
      padding-right: 0.25em; 
      font-style: italic; 
      font-weight: bold; 
     } 
    </style> 
</head> 
<body> 

<ol> 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</li> 
    <li>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</li> 
    <li>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</li> 
    <li>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</li> 
    <li>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</li> 
    <li>proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> 
</ol> 

</body> 
</html>

Nguồn

2013-12-02 12:29:18 nico

làm cách nào tôi có thể hiển thị số trên danh sách được sắp xếp nội tuyến?

Trả lời

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