入力の上にテキストを配置するにはどのような方法が最適ですか？

Question

入力要素の上に値の説明付きの式入力を生成しようとしています。以下は、私が再現しようとしているものです：

https://jsfiddle.net/CumminsJP/rLt48z89

しかし、私はでなければならないラベルを考慮することができませんでした：

私は私が仕事に数式要素が欲しかったおおよそどのようにスケッチ数式値の上に配置されます。いくつかのケースでは、2番目の行の次の要素と重なることになります - 私はそれを何と呼ぶべきか分かりません。私はそれが既にSOにある答えで質問されていると思うが、私は何を検索するのか分からない。

私は経験豊富なHTML/CSSの人ではないので、私の最初の本能はテーブルを使用することです。どのようなアプローチが私は見ている必要がありますか？ （私はこのように構築する必要がある他の多くの数式を持っています）。 SO私は理由jsfiddleリンクの掲載作って

コード：私はdisplay: inline-block; position: relative;に設定要素で、それの上に中心ラベルを必要とする要素の各グループを包むでしょう

<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

は、その中にlabelを追加します要素とabsolute lyそれを中心の上に置きます。次に、絶対に配置されたラベルのスペースを確保するために、この行をラップする要素の上部にパディングを追加します。

ここでは、スクリーンショットの最初の数組のラベルの例を示します。

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>