lining up wrapped texts vertically

Question

I want to start horizontally wrapped li texts in line, now it goes upward. Please see my example

HTML

  <ul>
  <li>Long text goes here.</li>
  <li>Another Longer Text Goes Here</li>
  <li>Shorter text</li>
  </ul>

CSS

ul {width:150px;}
li {width:30%; display:inline-block;whitespace:pre-line;}

Thank you.

There's also a nice explanation here: http://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward you might want to consider. — Hashem Qolami, Sep 03 '14 at 20:09

score 3 · Accepted Answer · edited Feb 12 '16 at 11:30

3

Use vertical align:

li {
   vertical-align: text-top;
}

edited Feb 12 '16 at 11:30

John Slegers

answered Sep 03 '14 at 09:04

Morpheus

score 0 · Answer 2 · answered Sep 03 '14 at 09:18

0

since you are using inline-block attribute for your li elements, you can use vertical-align to line them up;

li {
    vertical-align: text-top;
}

answered Sep 03 '14 at 09:18

Stan

2 Answers2