我一直在绞尽脑汁尝试许多不同的方法，试图达到健康元素的效果。
我想要的是有一个中间值，将一个值向左推，并将另一个值向右推。
我试过浮动，这种工作，但没有给我我想要的效果。
位置绝对会导致它们在超过一定长度时重叠在中央中间。
这是几乎正确的。
.travel-spacing {
margin-bottom: 20px;
}
.stat-wrapper {
height: 170px;
width: 150px;
}
.stat-label-align {
float: left;
width: 150px;
margin: 0 auto;
text-align: center;
}
.stat-align {
float: left;
width: 150px;
margin: 0 auto;
text-align: center;
}
.val-1 {
float: left;
position: relative;
margin-left: 35px;
}
.center-divide-h {
position: absolute;
width: 150px;
margin: 45px auto auto -150px;
text-align: center;
}
.center-divide-m {
position: absolute;
width: 150px;
margin: 60px auto auto -150px;
text-align: center;
}
.center-divide-s {
position: absolute;
width: 150px;
margin: 75px auto auto -150px;
text-align: center;
}
.val-2 {
float: right;
margin-right: 35px;
}
这是PHP:
<div class="stat-wrapper">
<?php echo "<div class ='stat-label-align'>Level:</div> <span class='"stat-align'">" . $playerLevel . "</span>"; ?><br />
<?php echo "<div class ='stat-label-align'>Exp:</div> <span class='"stat-align'">" . $playerExp . "</span>"; ?><br />
<?php echo "<div class ='stat-label-align'>Health:</div> <span class='"val-1'">" . $maxHealth . " </span><span class='center-divide-h'>/</span><span class='val-2'> " . $maxHealth . "</span>"; ?><br />
<?php echo "<div class ='stat-label-align'>Mana:</div> <span class='"val-1'">" . $maxMana . " </span><span class='center-divide-m'>/</span><span class='val-2'> " . $maxMana . "</span>"; ?><br />
<?php echo "<div class ='stat-label-align'>Stamina:</div> <span class='"val-1'">" . $maxStamina . "</span> <span class='center-divide-s'>/</span><span class='val-2'> " . $maxStamina . "</span>"; ?><br />
<?php echo "<div class ='stat-label-align'>Coins:</div> <span class='"stat-align'">" . $money . "</span>"; ?><br />
</div>
<div class="travel-spacing"></div>
How I want it:
5 / 5000
40 / 5000
它不像我通常做的那样干净，但我正在尝试我能想到的一切。谢谢你的建议!
我想我明白你的意思了。像这样的吗?
如果是，看看更新后的CSS:
.val-1 {
display:inline-block;
text-align:right;
width:65px;
}
.center-divide {
display:inline-block;
width: 20px;
text-align: center;
}
.val-2 {
display:inline-block;
width:65px;
}
通过使用display:inline-block，我可以为<span>元素应用固定的宽度，并且通过使用合适的数字和对齐方式，我可以产生您想要的效果。