Geek Answers Handbook

Correctly align text inside list item

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

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

If used, the range of options is aligned to the right, but 1 line below the expected line.

How can I get a range of options to fit a list item?

TIA, Adam

+5
source share
3 answers

Instead of swimming, you can 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;
}
+11
source

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}

, , , . . Chrome 3.0.

+1

If the HTML change is ok, you can wrap "Item 1" in the first interval and:

  • swim left (still floating. right).
  • use display: inline-blockboth on span and on text-align: right.options instead of floats (not compatible with Fx2, although it only works in IE6 / 7, because span is an inline element by default. Doesn't work with div)
+1
source

More articles:


All Articles