列表項有兩個跨度左右對齊

Question

我目前有一個如下所示的列表。

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

我想有一致的權利和長跨度的短短要左對齊。

我目前有一個寬度爲350px的列表，並且正在使用這個長期跨度。

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