텍스트 정렬은 : 바로 리 태그 내부의 범위에

Question

내 구조는 다음과 같습니다

:

<ul class="grupa-playerow">Blabla 
    <li class="player-li">Layout1<span class="player-godziny">15.00-17.00</span></li> 
    <li class="player-li">Layout2<span class="player-godziny">17.00-22.00</span></li> 
    <li class="player-li">Layout3<span class="player-godziny">22.00-24.00</span></li> 
</ul> 

을 여기에 스타일 간다 :

.grupa-playerow { 
position: relative; 
width: 300px; 
list-style-type: none; 
padding: 7px 0 7px 0; 
border-bottom: 1px solid #CDCDCD; 
font-size: 11px; 
cursor: pointer; 
} 


.player-li { 
padding: 2px 0 2px 20px; 
width: 100%; 
text-align: left; 
} 

.player-godziny { 
text-align: right !important; 
color: #5ACFC9; 
} 

내가 정렬 .player-godziny 범위를 싶습니다을 오른쪽으로. 왜 작동하지 않는거야? http://jsfiddle.net/wL2SF/

Answer 1

시도 :

float: right; 

대신 : 여기

은 바이올린의 정렬이 발견되면

text-align: right; 

JSFiddle

전 ssues, 그들은 가능성이 패딩 설정으로 인한되는 추가 필요

Answer 2

float:right;

DEMO

<ul class="grupa-playerow">Blabla 
    <li class="player-li">Layout1<span class="player-godziny">15.00-17.00</span></li> 
    <li class="player-li">Layout2<span class="player-godziny">17.00-22.00</span></li> 
    <li class="player-li">Layout3<span class="player-godziny">22.00-24.00</span></li> 
</ul> 

.grupa-playerow { 
position: relative; 
width: 300px; 
list-style-type: none; 
padding: 7px 0 7px 0; 
border-bottom: 1px solid #CDCDCD; 
font-size: 11px; 
cursor: pointer; 
} 


.player-li { 
padding: 2px 0 2px 20px; 
width: 100%; 
text-align: left; 
} 

.player-godziny { 
text-align: right !important; 
color: #5ACFC9; 
    float:right;/*ADD*/ 
} 

Answer 3

시도 :

.player-godziny { 
float: right; 
color: #5ACFC9; 
}