text-align: 在 li 标签内的 span 上答案

【问题标题】：text-align: right on a span inside li tagtext-align: 在 li 标签内的 span 上
【发布时间】：2014-07-17 21:42:58
【问题描述】：

我的结构是这样的：

<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 span 向右对齐。为什么它不起作用？

这是一个小提琴：http://jsfiddle.net/wL2SF/

【问题讨论】：

标签： html css text-align

【解决方案1】：

试试：

float: right;

代替：

text-align: right;

JSFiddle

如果您发现对齐问题，它们很可能是由您的填充设置引起的

【讨论】：

【解决方案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*/
}

【讨论】：

【解决方案3】：

试试：

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

【讨论】：