Элемент списка с двумя пролетами выравнивается по левому и правому краям

Question

В настоящее время у меня есть список, который выглядит следующим образом.

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

Я бы хотел, чтобы короткий диапазон был выровнен по правому краю, а длинный диапазон - по левому краю.

В настоящее время у меня есть список шириной 350 пикселей, и я использовал его для длинного промежутка.

.long {

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

Не могу найти способ заставить короткий промежуток выравниваться вправо.

Answer 1

Вы пробовали использовать 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;   
}