The only valid child of either a ul or ol is an li element; an li can, however, contain a ul (or ol). To achieve your aim: <ul> <li>myItem 1</li> <li>myItem 2</li> <li style=”list-style-type:none”> <ul> <li>myItem 2a</li> </ul> </li> <li>myItem 3</li> <li>myItem 4</li> </ul>
Modern Approach – CSS3 Flexboxes Now that we have CSS3 flexboxes, you no longer need to resort to tricks and workarounds in order to make this work. Fortunately, browser support has come a long way, and most of us can start using flexboxes. Just set the parent element’s display to flex and then change the … Read more
Have you tried setting li {list-style-type: none;} According to Need an unordered list without any bullets, you need to add this style to the li elements.
ul { display: table; margin: 0 auto; } <html> <body> <ul> <li>56456456</li> <li>4564564564564649999999999999999999999999999996</li> <li>45645</li> </ul> </body> </html>
You mean altering the size of the bullet, I assume? I believe this is tied to the font-size of the li tag. Thus, you can blow up the font-size for the LI, then reduce it for an element contained inside. Kind of sucks to add the extra markup – but something like: li {font-size:omgHuge;} li … Read more
You need to define a class for the bullets you want to hide. For examples .no-bullets { list-style-type: none; } Then apply it to the list you want hidden bullets: <ul class=”no-bullets”> All other lists (without a specific class) will show the bulltets as usual.
var ul = document.querySelector(‘ul’); for (var i = ul.children.length; i >= 0; i–) { ul.appendChild(ul.children[Math.random() * i | 0]); } This is based on Fisher–Yates shuffle, and exploits the fact that when you append a node, it’s moved from its old place. Performance is within 10% of shuffling a detached copy even on huge lists … Read more
A much easier solution to the OP’s problem is the following: <ol start=”X”> Where X is the value of the list you want to continue, so in his sample: <ol> <li>You can’t touch this</li> <li>You can’t touch this</li> </ol> <p>STOP! Hammer time.</p> <ol start=”3″> <li>You can’t touch this</li> </ol>
Yes, you can create a multi column list as described if you make the ul a flex container, change the flex-direction to column, allow it to wrap by applying flex-wrap: wrap and additionally force it to wrap by limiting its height: ul { height: 100px; display: flex; flex-direction: column; flex-wrap: wrap; } <ul> <li>item 1</li> … Read more
a bit of a cheat, but it works: HTML: <ol type=”A” style=”font-weight: bold;”> <li><span>Text</span></li> <li><span>More text</span></li> </ol> CSS: li span { font-weight: normal; }