The CSS Lists and Counters Module Level 3 introduces the ::marker pseudo-element. From what I’ve understood it would allow such a thing. Unfortunately, no browser seems to support it. What you can do is add some padding to the parent ul and pull the icon into that padding: ul { list-style: none; padding: 0; } … Read more
Assuming that didn’t work, you might want to combine the id-based selector with the li in order to apply the css to the li elements: #otis li { list-style-type: none; } Reference: list-style-type at the Mozilla Developer Center.
This code will remove the indentation and list bullets. ul { padding: 0; list-style-type: none; } http://jsfiddle.net/qeqtK/2/
Put its content in a span which is relatively positioned, then you can control the space by the left property of the span. li span { position: relative; left: -10px; } <ul> <li><span>item 1</span></li> <li><span>item 2</span></li> <li><span>item 3</span></li> </ul>
There is an easy fix (text-indent) to keep the indented list effect with the :before pseudo class. ul { margin: 0; } ul.dashed { list-style-type: none; } ul.dashed > li { text-indent: -5px; } ul.dashed > li:before { content: “-“; text-indent: -5px; } Some text <ul class=”dashed”> <li>First</li> <li>Second</li> <li>Third</li> </ul> <ul> <li>First</li> <li>Second</li> <li>Third</li> … Read more
Modern Browsers leverage the css3 columns module to support what you are looking for. http://www.w3schools.com/cssref/css3_pr_columns.asp CSS: ul { columns: 2; -webkit-columns: 2; -moz-columns: 2; } http://jsfiddle.net/HP85j/8/ Legacy Browsers Unfortunately for IE support you will need a code solution that involves JavaScript and dom manipulation. This means that anytime the contents of the list changes you … Read more
Update This answer is outdated. You can do this a lot more simply, as pointed out in another answer below: ul { list-style-position: outside; } See https://www.w3schools.com/cssref/pr_list-style-position.asp Original Answer I’m surprised to see this hasn’t been solved yet. You can make use of the browser’s table layout algorithm (without using tables) like this: ol { … Read more
Use 4 spaces. # Unordered list * Item 1 * Item 2 * Item 3 * Item 3a * Item 3b * Item 3c # Ordered list 1. Step 1 2. Step 2 3. Step 3 1. Step 3.1 2. Step 3.2 3. Step 3.3 # List in list 1. Step 1 2. Step 2 … Read more
The most common way to do this is something along these lines: ul { list-style: none; padding: 0; margin: 0; } li { padding-left: 1em; text-indent: -.7em; } li::before { content: “• “; color: red; /* or whatever color you prefer */ } <ul> <li>Foo</li> <li>Bar</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed … Read more
Option 2 is correct. The nested list should be inside a <li> element of the list in which it is nested. Link to the W3C Wiki on Lists (taken from comment below): HTML Lists Wiki. Link to the HTML5 W3C ul spec: HTML5 ul. Note that a ul element may contain exactly zero or more … Read more