Menu
I have a list:
<ol> <li>Login</li> <li>Address</li> <li>Shipping</li> </ol> It shows the decimal numbers fine, but when I set the <li> to inline or inline-block, the numbers vanish! I saw other places online mentioned that I have to ensure I have enough margin and padding. and I am sure that I do (10px of each!) Is there some other reason the numbers might be disappearing? I know from firebug that as soon as I uncheck inline they come back.
The CSS is:
ol { padding: 20px; list-style-type: decimal; } ol li { display: inline; margin: 0 10px; padding: 0 10px; } 
397
Learn HTML Ordered list starts with the <ol> tag. The list item starts with the <li> tag and will be marked as numbers, lowercase letters uppercase letters, roman letters, etc. The default numbers for list items. For creating an ordered list with numbers, use the <ol> tag attribute type.
Ordered HTML List. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
An ordered list uses numbers or some sort of notation that indicates a series of items. For example, an ordered list can start with number 1, and continue through 2, 3, 4, and so on.
An ordered list typically is a numbered list of items. HTML 3.0 gives you the ability to control the sequence number - to continue where the previous list left off, or to start at a particular number.
I don't know why this happens, but it can be solved by floating left instead of display: inline
See https://jsfiddle.net/CMKzK/
ol { padding: 20px; list-style-type: decimal; } ol li { float: left; margin: 0 10px; padding: 0 10px; } You can try this:
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; }<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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
