CODEWITHSUNDEEP
javascriptjqueryhtmlcss
just_user
just_user

Reputation: 12057

inline-block list with equal space between text.

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; }​

Upvotes: 0

Views: 752

Answers (2)

Jai
Jai

Reputation: 74738

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; }​

Upvotes: 2

A Fader Darkly
A Fader Darkly

Reputation: 3636

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.

Upvotes: 0

Related Questions