How to make <ul> list like this?

Answer 1

Take a look at this article:

• http://www.communitymx.com/content/article.cfm?cid=27f87

They explain the CSS setup for multi-column unordered lists.

Answer 2

Hi, It is possible by floating all your li elements, and setting the width of your ul and li elements. The display order will be
1 2
3 4
5 6
if you use this method.

Answer 3

Check this out to do multi-column lists: http://www.alistapart.com/articles/multicolumnlists/

For the custom bullets, specific style property you need to modify is:

list-style-image: url(someimage.gif);

Check out this link for more detailed info: http://www.alistapart.com/articles/taminglists/

find the section called "Markers".

Answer 4

Here's the simplest CSS you can use to accomplish what greg0ire is talking about:

<ul class='myList'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

.myList { width : 300px; }
.myList li { float: left; width: 150px; }

Of course, as mentioned this will not create a newspaper-column-like format. IT will float left to right before popping down.

For multi-column formats, you'd have to either use a device which supports CSS3 or use javascript.

In newer versions of Firefox, CSS like this may work:

.myList{
  -moz-column-count:3;
}