To center the ul and also have the li elements centered in it as well, and make the width of the ul change dynamically, use display: inline-block; and wrap it in a centered div. <style type=”text/css”> .wrapper { text-align: center; } .wrapper ul { display: inline-block; margin: 0; padding: 0; /* For IE, the outcast … Read more
This is the solution I have working in Firefox 3, Opera and Google Chrome. The list still displays in IE7 (but without the close bracket and left align numbers): ol { counter-reset: item; margin-left: 0; padding-left: 0; } li { display: block; margin-bottom: .5em; margin-left: 2em; } li::before { display: inline-block; content: counter(item) “) “; … 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
This is because the tick is inline content so when the text wraps it will continue to flow as usual. You can stop this behaviour by taking advantage of text-indent: The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element. … 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
The CSS solution is: http://www.w3.org/TR/css3-multicol/ The browser support is exactly what you’d expect.. It works “everywhere” except Internet Explorer 9 or older: http://caniuse.com/multicolumn ul { -moz-column-count: 4; -moz-column-gap: 20px; -webkit-column-count: 4; -webkit-column-gap: 20px; column-count: 4; column-gap: 20px; } See: http://jsfiddle.net/pdExf/ If IE support is required, you’ll have to use JavaScript, for example: http://welcome.totheinter.net/columnizer-jquery-plugin/ Another solution … 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
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
The problem is that by default, browsers have custom css – in chrome for example: ul, menu, dir { display: block; list-style-type: disc; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 40px; } You’ll have to use a custom rule for your ul: element.style { margin-left: 0px; /* set to 0 if your not … Read more
You can use .has() selector: if(!$(‘ul’).has(‘li’)){//ul is empty }