my structure looks like this:
<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>
and here goes the style:
.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;
}
I would like .player-godziny span to align to the right. Why isn't it working?
Here's a fiddle: http://jsfiddle.net/wL2SF/
Try:
float: right;
instead of:
text-align: right;
JSFiddle
If you notice alignment issues, they are likely resulting from your padding settings
you need add 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*/
}
Try:
.player-godziny {
float: right;
color: #5ACFC9;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With