具有两个跨度的列表项左右对齐

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