Question

我是javascript新手，正在制作一个简单的页面，其中有几个span元素。该页面应该看起来像这样：

Your Name----------------------------------------------Enemy's
Name--------------------------------------------------Your Health:
100/100---------------------------------Enemy's Health: 200/200

“您的健康状况：”是一个范围，“ 100/100”是另一个具有ID的范围，因此我可以在javascript中进行更改。问题是，如果我降低左侧的健康值，则将其更改为10/100。由于字符较少，因此显示敌人健康状态的右侧跨度全部移至左侧，因为它们的位置相对于左侧文本。

我尝试添加“ position: fixed”，但这不起作用。如何为该元素指定确切的固定位置？

Answer 1

您可能希望查看跨度的宽度，以确保仅由于跨度的内容而不会改变设置在右侧的任何内容。另外，您将需要在跨度上设置display: inline-block;，以确保跨度可以快乐地并排放置。

总体而言，我建议您学习CSS的基础课程，因为元素的定位是任何前端样式都应理解的基础。

以下是显示我提到的修复程序的小提琴：https://jsfiddle.net/6xcp08zk/1/

Answer 2

将它们放在行和列中，以使其正确对齐。

<style>
  .row {
    display: block;
    width: 100%;
  }

  .col50 {
    display: inline-block;
    width: 50%;
  }
</style>

https://codepen.io/anon/pen/YjEgKP

固定跨度元素定位

2 个答案: