javascript - 固定第二个字的位置html

Question

对 JavaScript 和 HTML 非常陌生，因此不确定如何更改这段代码。

我有 3 个词，比如 x、y、z - 这些词的长度可以变化。我希望 y 在 x 之后的固定位置开始。以下是我正在做的事情。

var text = '';
text += '<div style="float: left; font-size: 0.2em; padding-left: 5px">' + x + ' ms</div>'; }
text += '<div style="float: center; font-size: 0.8em; padding-left: 5px; text-align: center">';
text += y;
text += '<div style="float: right; font-size: 1.0em; padding-right: 5px">';
text += z;
text += '</div>';

这会将 y 调整到中心 - 如果 z 的长度有点大，则将其向左移动。
即，我需要的是:

x   y   z
x   y zzz

不是这个:

x   y   z
x  y  zzz

任何帮助将不胜感激。还有一些快速学习 JavaScript、HTML 的好资源。
非常感谢。

Answer 1

您可以在所有 DIV 上使用固定宽度、行内 block 和 text-align: right。

.a {
  display: inline-block;
  width: 30px;
  padding-right: 5px;
  text-align: right;
}

<div class="wrapper">
  <div class="a">x</div>
  <div class="a">y</div>
  <div class="a">z</div>
</div>
<div class="wrapper">
  <div class="a">x</div>
  <div class="a">y</div>
  <div class="a">zzz</div>
</div>
<div class="wrapper">
  <div class="a">x</div>
  <div class="a">yy</div>
  <div class="a">z</div>
</div>