inline-block list with equal space between text.

Question

I have a list with five items which is displayed inline. The text in the first list item has to be align with the left side and the last item with the right side. What I want is an equal spacing between the text in each item and still be relative to both the right and left side.

I found this: http://jsfiddle.net/Cerebrl/Wt4hP/ in this thread: A Space between Inline-Block List Items

Which wouldn't work since its all aligned to the left. Bellow is an example code and also on jsfiddle here: http://jsfiddle.net/phacer/uV9s9/

any ideas? js or jquery solutions works as well for me if there are any.

<ul>
    <li>first item</li>
    <li>second item</li>
    <li>3 item</li>
    <li>fourth item</li>
    <li class='last'>5 item</li>
</ul>

css:

ul { width: 650px; }
ul li { width: 130px; position: relative; display: inline-block; float: left; }
ul li.last { float: right; text-align: right; }

have you tried with giving the width in % like 20% for all lis. — Jai, Dec 13 '12 at 10:21
this works pretty well! 15% on the first and last items and 23% on the other three — just_user, Dec 13 '12 at 10:35

score 2 · Accepted Answer · answered Dec 13 '12 at 10:52

2

You can try with giving the width in % instead of px

ul { width: 650px; }
ul li { width: 20%; position: relative; display: inline-block; float: left; }
ul li.last { float: right; text-align: right; }

answered Dec 13 '12 at 10:52

Jai

71,335
12
70
93

score 0 · Answer 2 · answered Dec 13 '12 at 10:25

If you're always going to have the same number of elements and the same width container, you could try this:

<ul>
  <li class='first'>first item</li>
  <li>second item</li>
  <li>3 item</li>
  <li>fourth item</li>
  <li class='last'>5 item</li>
</ul>


ul { width: 650px; }
ul li { width: 130px; position: relative; display: inline-block; float: left; text-align: center; }
ul li.last { float: right; text-align: right; }
ul li.first {text-align: left; }

http://jsfiddle.net/x96eN/1/

This, I think, is what you're after. There will be a slight bunching in the middle due to the fact that the text is differently aligned. You could:

Use left-aligned text in all li elements, but make the containing box visible. This would visually rebalance things.
Play with the widths of the first, last and center lis to hide the effect.
Use padding to specifically alter the position of the text in different li elements.
Create a general case in JQuery to align an arbitrary number of li elements. If you ever want more or less than 5 or you need to change the overall width you'll need to do this anyway - although I don't like to use JS for just layout.

I'm sorry, I forgot to mention that I've tried this. It gets closer but the distance between the first and the second item is longer than second and third. Same on the right side. =( — just_user, Dec 13 '12 at 10:30
As I pointed out in the answer. I also pointed out that fiddling with the values of the first, last and middle elements will fix the problem. (Not my job! ;) I'm curious as to how the accepted answer fixed the problem. Putting it in fiddler yielded no change from the original problem state. Playing with percentage widths in a fixed width element will be the same, logically, as playing with pixel widths - you're just working with a different total value. Still, as long as you have a solution. :) — A Fader Darkly, Dec 13 '12 at 20:02

inline-block list with equal space between text.

2 Answers2