Right align some text within a list item

Question

I have a nested unordered list which has main content on the left, and I would like to add options which are floated right, such that they are aligned on the right regardless of the level of indentation.

<ul>
<li> Item 1 <span class='options'> link </span> </li>
<li> Item 2 <span class='options'> link </span>
  <ul>
    <li>Item 3 <span class='options'> link </span> </li>
  </ul>
</li>
</ul>

I have the following css:

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    padding-left: 15px;
    width: 400px;
}

.options {
    float: right;
    width: 50px;
}

When this is used however the options span is aligned to the right, but 1 line below the expected line.

How can I get the options span to line up with the list item?

TIA, Adam

Answer 1

If modifying the HTML code is OK, you could enclose "Item 1" in a first span and:

• float it to left (still floating .options to the right)
• use display: inline-block on both span and text-align: right on .options, instead of floats (no compatible with Fx2 though, and only working in IE6/7 because span is an inline elements by default. Would not work with div)

Answer 2

Using this CSS:

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    padding-left: 15px;
    width:400px;
}
.options {
    float: right;
    width: 50px;
}
li li { width:385px} 

This unfortunately requires your to define a width minus the padding. depending on your flexibility this will work. Tested in Chrome 3.0.

Answer 3

Instead of floating, you may want to try absolute positioning.

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    padding-left: 15px;
    width: 400px;
    position: relative;
}

.options {
    width: 50px;
    position: absolute;
    right: 0px;
}