CSS with Aligned LI within a UL
- by Alex
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.
<style>
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;
}
</style>
<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!
