固定跨度元素定位

Question

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

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

"Your Health:" 是一个跨度，“100/100”是另一个具有 ID 的跨度，因此我可以在 javascript 中更改它。问题是，如果我降低左侧的健康值，将其更改为 10/100。由于字符较少，右侧显示敌人生命值的范围都略微向左移动，因为它们的位置是相对于左侧文本的。

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

Answer 1

您可能想看看在跨度上设置宽度，以确保设置在右侧的任何内容不会仅仅因为跨度的内容而移动。此外，您还需要在 span 上设置 display: inline-block; 以确保 span 可以愉快地并排放置。

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

这里 fiddle 显示了我提到的修复：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

固定跨度元素定位

Fixed span element positioning

html

javascript

css

css-position