HTML+CSS: Equal distance between footer nav elements without using table [duplicate] - html

Question

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Fluid width with equally spaced DIVs
I am trying to put footer elements which are texts. I was trying to have equal distance between texts elements.
<nav>
<ul>
<li><a>Item Reg</a></li>
<li><a>Item Sm</a></li>
<li><a>Item Very Long</a></li>
<li><a>Item Reg</a></li>
</ul>
</nav>
Here is an image explaining the scenario I want to implement. Left and right elements are always aligned to left and right respectively.
How can I do it with css and html. NOTE: CSS3 is allowed.

Answer 1

One way would be to use percentage points for widths.
ul {
width: 100%;
}
ul li {
display: table-cell;
width: 25%;
text-align: center;
}

Answer 2

You ca use a padding-left for each <li> something like this:
li{
position:relative;
float:left;
padding-left:20px;}

Answer 3

Assuming you have a fixed number of elements simply use :
ul{
padding:0 20px 0 20px;
width:100%;
}
li{
display:inline;
float:left;
width:25%;
}
<ul>
<li>One</li>
<li>Two</li>
</ul>

Answer 4

You can achieve it in this way
<div class="footer">
<div style="width:200px; float:left;">
<ul style="list-style:none">
<li>1</li>
<li>2</li>
</ul>
</div>
<div style="width:200px; float:left;">
<ul style="list-style:none">
<li>1</li>
<li>2</li>
</ul>
</div>
<div style="width:200px; float:left;">
<ul style="list-style:none">
<li>1</li>
<li>2</li>
</ul>
</div>
<div style="clear:both"></div>
</div>