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.