在HTML列中排列列表的间距？

Question

I've created a <ul> and <li> list and got a ton of different information in it. Is it possible to space different pieces of information in one <li> over the page, like it had columns?

Like the first word of <li> is aligned at the left side of the page, then the second is always at the first 1/4 the 3rd at half and the 4th at 3/4, for every <li> ?

Is this possible, if yes, how is it done? If needed I can post my PHP/HTML Code in here (though it's dynamic).

EDIT: Here is the Code: http://jsfiddle.net/woz1r55e/ :)

Thanks beforehand already :)

Answer 1

In your CSS define two classes

.inline-block
{
    display: inline-block;
}

.col
{
    width: 25%;
}

and then define containers for whatever you want in those columns.

<div>
    <div class="inline-block col">List 1
        </div>List 2<div class="inline-block col">
        </div>List 3<div class="inline-block col">
        </div>List 4<div class="inline-block col">
    </div>
</div>

Source: 4 column CSS layout - Fluid

Answer 2

I think this is what you mean:

http://jsfiddle.net/woz1r55e/1/

I added this css:

ul ul ul li {
    display: inline-block;
    width: 25%;
}

I'd recommend giving either the <li> a class to make it inline block or to give the third <ul> class and make it's children inline-block

Answer 3

Create different css classes for each "column":

ul.Col1 { margin-left: 10px; }
ul.Col2 { margin-left: 210px; }
ul.Col3 { margin-left: 410px; }

<ul class="Col1">
   ...
</ul>
etc...