Php 如何使数字在位于中心位置的CSS元素上左右展开?
我一直在绞尽脑汁尝试许多不同的方法,试图达到健康元素的效果 我要做的是让一个中央中位数向左推一个值,然后向右推另一个值 我尝试过浮动,这是一种工作,但没有给我的效果,我正在寻找 当超过一定长度时,定位绝对会导致它们与中央分隔带重叠 以下是几乎正确的方法Php 如何使数字在位于中心位置的CSS元素上左右展开?,php,css,html,positioning,Php,Css,Html,Positioning,我一直在绞尽脑汁尝试许多不同的方法,试图达到健康元素的效果 我要做的是让一个中央中位数向左推一个值,然后向右推另一个值 我尝试过浮动,这是一种工作,但没有给我的效果,我正在寻找 当超过一定长度时,定位绝对会导致它们与中央分隔带重叠 以下是几乎正确的方法 .travel-spacing { margin-bottom: 20px; } .stat-wrapper { height: 170px; width: 150px; } .stat-label-align {
.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>
它不像我平时做的那么干净,但我试了我能想到的一切。谢谢你的洞察力 我想我明白你在追求什么。比如说 如果是,请查看更新的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
我可以将固定宽度应用于
元素,通过使用合适的数字和对齐方式,我可以产生您想要的效果。我想我理解您的意图。比如说
如果是,请查看更新的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
我可以将固定宽度应用于
元素,通过使用合适的数字和对齐方式,我可以产生您想要的效果。您能为我们提供一个实验吗?给您!如果我理解正确,你想让斜线左边的数字右对齐,反之亦然?我想取左边的numbercurrent值,并保持它与中心除法的距离为5 px,不管数字的大小。正确的数字是最大值,并用5像素的空间将其展开。你能提供一个供我们实验的数字吗?给你!如果我理解正确,你想让斜线左边的数字右对齐,反之亦然?我想取左numbercurrent值,并保持它与中心除法的距离为5 px,而不管数字的大小。右数值是最大值,并用5 px的空间向右展开。是的,这就是它的总和。非常感谢!是的,总而言之。非常感谢!