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上使用固定宽度，内联块和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>

Answer 2

在快速学习JavaScript，HTML和CSS方面，您应该尝试使用FreeCodeCamp。他们有一个使用HTML和CSS的前端Web开发部分，然后在以后添加JavaScript。

修复第二个字位置html

2 个答案: