什么方法最适合将输入上的文本对齐？

Question

我正在尝试使用输入元素上方的值描述生成公式输入。以下是我想要重现的内容：

我粗略概述了我希望公式元素如何工作：

https://jsfiddle.net/CumminsJP/rLt48z89

但我没有考虑必须定位在公式值之上的标签。在某些情况下会与第二行的下一个元素重叠 - 我不知道该怎么称呼它。虽然我怀疑这是一个已经在SO上的答案问题，但我不知道该搜索什么。

由于我不是一个经验丰富的HTML / CSS人，我的第一直觉就是使用表格。我应该看什么方法？ （我还有许多其他公式需要像这样构建）。

由于jsfiddle链接，SO正在使我发布的代码：

<div>

  <span class="formula-char">((</span>
  <input class="formula-input" style="width: 50px;" />
  <span class="formula-char">-</span>
  <span class="formula-char">(</span>
  <input class="formula-input" style="width: 50px;" />
  <span class="">✕</span>
  <input class="formula-input" style="width: 50px;" value="0.3" />
  <span class="formula-char">)</span>
  <span class="formula-char">)</span>
  <span class="">✕</span>
  <input class="formula-input" style="width: 50px;" value="6400" />
  <span class="formula-char">)</span>
  <span class="">✕</span>

  <span class="formula-char">(</span>
  <input class="formula-input" style="width: 30px;" value="7.48" />
  <span class="" style="font-size: 130%;">÷</span>
  <input class="formula-input" style="width: 30px;" value="12" />
  <span class="">✕</span>
  <input class="formula-input" style="width: 50px;" value="1000" />
  <span class="formula-char">)</span>

  <span class="formula-char">=</span>
  <input class="formula-input" style="width: 50px;" value="1000" />
  <span class="">kgal/year</span>

</div>



.formula-input {
  font-size: 100%;
  margin-left: 1px;
  margin-right: 1px;
}

.formula-char {
  font-size: 200%;
  margin-left: 1px;
  margin-right: 1px;
}

Answer 1

我会将元素集中需要标签的每组元素包装在display: inline-block; position: relative;元素中，然后在该元素中添加label并将absolute位置放在上面并且中心。然后在包裹该行的元素顶部添加一个填充，为绝对定位的标签腾出空间。

以下是屏幕截图中前几个标签的示例。

＆＃13;

＆＃13;

body {
  padding-top: 2em;
}

.formula-input {
  font-size: 100%;
  margin-left: 1px;
  margin-right: 1px;
}

.formula-char {
  font-size: 200%;
  margin-left: 1px;
  margin-right: 1px;
}

.group {
  display: inline-block;
  position: relative;
}

.group label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  text-align: center;
}

＆＃13;

<div>

  <div class="group">
    <span class="formula-char">((</span>
    <input class="formula-input" style="width: 50px;" />
    <span class="formula-char">-</span>
    <span class="formula-char">(</span>
    <label>some label</label>
  </div>

  <div class="group">
    <input class="formula-input" style="width: 50px;" />
    <span class="">✕</span>
    <input class="formula-input" style="width: 50px;" value="0.3" />
    <span class="formula-char">)</span>
    <span class="formula-char">)</span>
    <label>some label</label>
  </div>
  
  <span class="">✕</span>
  <input class="formula-input" style="width: 50px;" value="6400" />
  <span class="formula-char">)</span>
  <span class="">✕</span>

  <span class="formula-char">(</span>
  <input class="formula-input" style="width: 30px;" value="7.48" />
  <span class="" style="font-size: 130%;">÷</span>
  <input class="formula-input" style="width: 30px;" value="12" />
  <span class="">✕</span>
  <input class="formula-input" style="width: 50px;" value="1000" />
  <span class="formula-char">)</span>

  <span class="formula-char">=</span>
  <input class="formula-input" style="width: 50px;" value="1000" />
  <span class="">kgal/year</span>

</div>

＆＃13;

＆＃13;

＆＃13;