Question

Is there way to spread out elements, (eg: < li>’s inside a < ul>)?

My < li>’s are inline (not vertical) and I DON’T want to change their size.

I just want to set the space between the < li>-elements to get 100% in sum.

eg.:

< ul> consists of 3 < li>’s: the first one is 200px, the 2nd one is 200px and the 3rd one has 400px.

If the screen has 1000px, the spaces between the li’s should be 200px, so 100px for each space (if the padding on the left and right side is 0px).

I’d like to achieve this without the use of javascript

EDIT:

---

The Pic shows the sultion I wanted to achieve with lists.
Every element with a blue border should have been an li (and as you can see in the picture: there are some elemets which contain text, and so it wouldn’t be a good idea to set their with inside css).
The space between the elements should be exacly so big, that the last element (the red logout-button) touches the right edge of the screen.

-but, in order to avoid javascript, I solved it now with a table

Answer 1

How I solved it:
instead of using this http://jsfiddle.net/Tejzf/
I used a table instead of the ul and il elements.
Table width=100%, the width’s of the cells (which where li’s before) are 1px (as small as possible).
And between the cells, I added new, empty cells where I didn’t define the width.

<table width="100%"><tr>
   <td width="1">DATA1 from LI1</td><td></td>
   <td width="1">DATA2 from LI2</td><td></td>
   <td width="1">DATA3 from LI3</td>
</tr></table>

and thx for your replies