html - 哪种方法最适合在输入上方对齐文本？

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 将其定位在上方和中心。然后在包裹这条线的元素的顶部添加一个填充，为绝对定位的标签腾出空间。

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

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;
}

<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>