Right Align Some Text Within A List Item

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 th

Solution 1:

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;
}

Solution 2:

Using this CSS:

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

li {
    padding-left: 15px;
    width:400px;
}
.options {
    float: right;
    width: 50px;
}
lili { 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.

Solution 3:

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)