Search code examples
htmlcssalignment

List item with two spans align left and right

I currently have a list that looks like this.

<li><a href="#"><span class="short">SHORT</span> <span class="long">LONG</span></a></li>

I would like to have the short span aligned to the right and the long span to be aligned to the left.

I currently have the list at a width of 350px and was using this for the long span.

.long {

   width: 300px;
   position: absolute;
   right: 0px;
}

Can't seem to find a way to get the short span to align to the right.

Solution

  • Have you tried using float?

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

li {
    list-style-type: none;             
}

.long {
    width: 300px;
    float:left;
    background-color: yellow;
}

.short {
    width: 200px;
    float:right;
    background-color: green;   
}