Display list item elements in different columns

Question

I'm trying to change the looks of a DataLife Engine template, and I'm wondering if you could help me with alignment.

I have some info displayed in a colum, like this:

<div class="short-description">
    <div  class="table">
      <ul class="table">

        <li>A</li>

        <li class="odd">B</li>

        <li>C</li>

        <li class="odd">D</li>

        <li>E</li><br>

      </ul>
    </div>
</div>

This looks like

A
B
C
D
E

I want them to display like this:

A    B    C
D    E

The content of each "cell" can be different. E.g. if B has more contents, I'd like to adjust the columns as follows:

A    B    C
     B
     B
D    E

So it would stretch down until all info is displayed. The class odd just changes the color of that cell.

Here is the jsfiddle demo.

Oh, sorry i never worked with it. I'll try putting it in and i'll let you know when it's edited. — Pedro Lino, Jan 28 '14 at 15:20

Hashem Qolami · Accepted Answer · 2014-02-24T14:50:13.907

3

In order to do that, you could display the list-items as inline-block elements, as follows:

ul {
    list-style: none;
    padding: 0;
    font: 0/0 a;  /* Remove space characters between inline-block elements */
}

ul li {
    font: 16px/1 Arial, sans-erif;  /* Reset the font property */
    display: inline-block;
    vertical-align: top;     /* <-- keep the inline elements at the top    */

    background-color: #ddd;  /* For the demo */
    margin: 5px;             /* For the demo */
    width: 200px;            /* For the demo */
}

JSFiddle Demo.

edited Feb 24 '14 at 14:50

answered Jan 28 '14 at 15:23

Hashem Qolami

97,268
26
150
164

Hi there @Hashem, here you have a link of JSFiddle of my code http://jsfiddle.net/2tEQX/ Can you help me edit this one? I've tried puting the with to 33,3% but it doesn't work :S – Pedro Lino Jan 28 '14 at 15:27
@PedroLino I'll try my best. – Hashem Qolami Jan 28 '14 at 15:29
@PedroLino Some of HTML elements / CSS selectors are not used , Should I remove them from the fiddle? – Hashem Qolami Jan 28 '14 at 15:31
Ok, i think i figured it out. The problem is it doesn't adjust to the dimention of the li cell. If i put BBBBBBBBBBBBBBBBBBBBBB it just overlaps the other li... :/ Shure shure, edit it at your likes :) – Pedro Lino Jan 28 '14 at 15:31
@PedroLino You could use `word-break: break-all;` to break the line. Check **[this Fiddle](http://jsfiddle.net/hashem/TYnFL/2/)**. – Hashem Qolami Jan 28 '14 at 15:33
Ok its working :) I have another question. http://jsfiddle.net/2tEQX/2/ Has you can see here, start displaying from the bottom. Is there a way to put the displaing on the top like A? – Pedro Lino Jan 28 '14 at 15:38
vertical-align: top; I've got it. :) Thank you – Pedro Lino Jan 28 '14 at 15:41
@PedroLino I was writing to you :) you could use `vertical-align: top;` **[Updated Fiddle](http://jsfiddle.net/hashem/2tEQX/3/)** – Hashem Qolami Jan 28 '14 at 15:43

score 1 · Answer 2 · answered Jan 28 '14 at 15:28

1

Look at jsfiddle

.table ul{
    list-style: none;
    width: 180px;
    height: auto;
}

.table li{
    display: inline-block;
    vertical-align: top;
    width: 50px;
    background: rgba(0,0,0,0.2);
    margin: 3px;
}

answered Jan 28 '14 at 15:28

oboshto

3,478
4
25
24

Thank you :) It was missing the vertical-align: top; :) – Pedro Lino Jan 28 '14 at 15:43

Display list item elements in different columns

2 Answers2

Linked