0

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 :)

XtremeDarkness
  • 13
  • 4
  • 3
    Please post a testable, working version of your code in a jsfiddle. In your case you use php to generate your html. Please generate the html and put the output in a fiddle. That way people see what you mean. Now it's just a guessing game. – donnywals Feb 11 '15 at 15:24
  • Will do now (just wanted suggestions) – XtremeDarkness Feb 11 '15 at 15:25

3 Answers3

3

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

Community
  • 1
  • 1
Greg Van Gorp
  • 771
  • 1
  • 7
  • 17
0

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

donnywals
  • 7,241
  • 1
  • 19
  • 27
-2

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...
David P
  • 2,027
  • 3
  • 15
  • 27