CSS with Aligned LI within a UL - html

Question

I am trying to have some LIs within a UL align left, right, and center within a page. For the life of me, I can't figure out how to keep something "centered" on the same line as a left and right aligned LI.
ul {
margin:1em 0;
padding:0
}
ul li{
display:inline-block;
white-space:nowrap;
margin:5px
}
ul li.left{
float: left;
text-align:left;
}
ul li.center{
float:left;
text-align: center;
}
ul li.right{
float: right;
text-align:right;
}
<ul>
<li class="left">left</li>
<li class="center">center</li>
<li class="right">right</li>
</ul>
<ul>
<li class="left">left</li>
<li class="right">right</li>
</ul>
<ul>
<li class="left">left</li>
</ul>
Can anyone help? BTW, I've trying to avoid DIVs.
Thanks!

Answer 1

If you want each to share screen space equally, you can do this:
<style>
.split { width: 33%; float: left; }
</style>
<ul>
<li class="split">left</li>
<li class="split">center</li>
<li class="split">right</li>
</ul>
You'll want to move your styles to an external stylesheet, though.

Answer 2

You can definitely do this with only one thing being floated.
ul li { float:right; }
If you float them all to the left, then you will get (with three LI elements) a right, center, and left.
<ul><li>right</li><li>center</li><li>left</li></ul>
A good way to think of this is thinking of what you want to happen to each individual LI element: you want each one to be moved to the right of the other. This is the most common method of making horizontal navigation with a list structure.

Answer 3

Your li elements will only be as wide as the text that it contains since you are floating them and are not specifying width. Do you want your center element to be fluid? If I'm not mistake., it sounds like you're going for a fluid three-column layout? There are plenty of examples of these on the net if that's what you're going for.

Answer 4

Thanks to mitch and everyone else, this is the solution I came up with and works for me.
<style>
ul {
margin: 1em 0;
padding: 0;
list-style-type:none;
}
li.three {
width: 33%;
}
li.two {
width: 50%;
}
li.one {
width: 100%;
}
li.left {
float: left;
text-align: left;
}
li.center {
width: 33%;
float: left;
text-align: center;
}
li.right {
width: 33%;
float: right;
text-align: right;
}
</style>
<ul>
<li class="three left">left</li>
<li class="three center">center</li>
<li class="three right">right</li>
</ul>
<ul>
<li class="two left">left</li>
<li class="two right">right</li>
</ul>
<ul>
<li class="one left">left</li>
</ul>