私はhtmlを使用してこのコードを持っています:
<div id="right">
<br><br><br>
<label class='width1'>R : [m] : 10 </label>
<input class="width2 slider" type="range" min="10" max="40" step="0.01" value="10" id="myRange" onchange="updateValue_R(this.value);">
<span class='width3'>40</span>
<input class='width4' type="text" id="textInput" value="">
<script>
function updateValue_R(val) {
document.getElementById('textInput').value = "R = " + val;
}
</script>
<br>
<label class='width1'>Sf : [mks : m/Pa] : -15 </label>
<input class="width2 slider" type="range" min="-15" max="40" step="0.01" value="-9" id="myRange1" onchange="updateValue_Sf(this.value);">
<span class='width3'>-9</span>
<input class='width4' type="text" id="textInput1" value="">
<script>
function updateValue_Sf(val) {
document.getElementById('textInput1').value = "Sf = " + val;
}
</script>
</div>
ただし、これにより次の結果が生成されます。
そして実際、タイプ範囲の入力を他の入力と同様に揃えたいだけです。成功せずに、ラベルの余白を増やしようとしました。
ご協力ありがとうございました!
編集:私がやりたいことはこれです:
回答 5 件
display: inline-block; and vertical-align: middle;
を使用できます このため。以下の更新されたスニペットを確認してください...label, input, span { display: inline-block; vertical-align: middle; } .width1 { width: 150px; } .width3 { width: 30px; }
<div id = "right"> <br /><br /><br /> <label class='width1'>R : [m] : 10 </label> <input class="width2 slider" type="range" min="10" max="40" step="0.01" value="10" id="myRange" onchange="updateValue_R(this.value);"> <span class='width3'>40</span> <input class='width4' type="text" id="textInput" value="" > <script> function updateValue_R(val) {document.getElementById('textInput').value="R = "+val;} </script> <br /> <label class='width1'>Sf : [mks : m/Pa] : -15 </label> <input class="width2 slider" type="range" min="-15" max="40" step="0.01" value="-9" id="myRange1" onchange="updateValue_Sf(this.value);"> <span class='width3'>-9</span> <input class='width4' type="text" id="textInput1" value="" > <script> function updateValue_Sf(val) {document.getElementById('textInput1').value="Sf = "+val;} </script> </div>
テーブルと行を作成して、それらを完全に整列させることができます 以下のコードのように。
<div id="right"> <br><br><br> <table> <tr> <td> <label class='width1'>R : [m] : 10 </label> </td> <td> <input class="width2 slider" type="range" min="10" max="40" step="0.01" value="10" id="myRange" onchange="updateValue_R(this.value);"> </td> <td> <span class='width3'>40</span> </td> <td> <input class='width4' type="text" id="textInput" value=""> </td> <script> function updateValue_R(val) { document.getElementById('textInput').value = "R = " + val; } </script> </tr> <tr> <td> <label class='width1'>Sf : [mks : m/Pa] : -15 </label> </td> <td> <input class="width2 slider" type="range" min="-15" max="40" step="0.01" value="-9" id="myRange1" onchange="updateValue_Sf(this.value);"> </td> <td> <span class='width3'>-9</span> </td> <td> <input class='width4' type="text" id="textInput1" value=""> </td> <script> function updateValue_Sf(val) { document.getElementById('textInput1').value = "Sf = " + val; } </script> </tr> </table> </div>
固定
width
を追加する必要があります CSSで要素を正しく配置します。他の提案については、この作業スニペットのコメントを参照してください。
(スニペットをよりきれいにするためにコードの一部を移動しました)// Modified this to get only one "function", and removed inline JavaScript var sliders = document.querySelectorAll('.slider'); sliders.forEach(function() { this.addEventListener("change", function(event) { var elm = event.target; sliderText = elm.nextElementSibling.nextElementSibling; // Target the input tag sliderText.value = elm.getAttribute("prefix") + ' = ' + elm.value; }); });
#right *[class^="width"] { /* Target all elements starting with "width" in #right */ border: 1px solid #ccc; /* Added to make it visual */ vertical-align: middle; /* Better layout with this */ display: inline-block; /* The widths below won't work without this */ } .width1 { /* This is what you need */ width: 130px; } .width3 { /* You must want to add this too */ width: 30px; text-align: center; }
<div id="right"> <label class='width1'>R : [m] :</label> <span class='width3'>10</span><!-- Modified here --> <input class="width2 slider" type="range" min="10" max="40" step="0.01" value="10" id="myRange" prefix="R"> <span class='width3'>40</span> <input class='width4' type="text" value=""> <br /> <label class='width1'>Sf : [mks : m/Pa] :</label> <span class='width3'>-15</span><!-- Modified here --> <input class="width2 slider" type="range" min="-15" max="40" step="0.01" value="-9" id="myRange1" prefix="Sf"> <span class='width3'>-9</span> <input class='width4' type="text" value=""> </div>
それが役に立てば幸い!
ブラウザの
display: grid
のサポートが制限されているため (CSSグリッド)、Flexboxを使用してこの方法で行うことをお勧めします。* { box-sizing: border-box; } .row { display: flex; } .row label { min-width: 150px; } .row span { min-width: 20px; } .row input { margin-left: 20px; } input { width: 100%; }
<div class="row"> <label class='label'>R : [m] : 10 </label> <input class="slider" type="range" min="10" max="40" step="0.01" value="10" id="myRange" onchange="updateValue_R(this.value);"> <span>40</span> <input type="text" id="textInput" value=""> </div> <div class="row"> <label>Sf : [mks : m/Pa] : -15 </label> <input class="slider" type="range" min="-15" max="40" step="0.01" value="-9" id="myRange1" onchange="updateValue_Sf(this.value);"> <span>-9</span> <input type="text" id="textInput1" value=""> </div> <script> function updateValue_R(val) { document.getElementById('textInput').value = "R = " + val; } function updateValue_Sf(val) { document.getElementById('textInput1').value = "Sf = " + val; } </script>
関連した質問
- 1つにカーソルを合わせると、別のCSSに影響します
- CSS:ぼやけたdiv内のぼやけたdivの問題
- 純粋なCSSオーバーレイスクロール
- 水平ナビゲーションバーのドロップダウンメニューの配置関連の問題
- ブートストラップドロップダウン-メニューが開かない
- HTML/CSS + JS(Datatables)で2つの列を1つにマージしてテーブルを表示する
- ページの下部にいるときにドロップダウンボタンに触れると、フッターを持ち上げるスティッキーナビゲーションバー
- ボックスシャドウインセットと通常のdivを持つ方法はありますか
- HTMLとJavaScriptを使用してコピーボタンを作成するにはどうすればよいですか?
- JavaScript onclick画像を変更し、カウンターを増やします
おそらく最速の方法は
Grid
を使用することです レイアウト。メディアクエリなしでビューポートに適切に適応します。div
で各行を折り返す 素子このスタイルをラッパーに与えます
その後、いくつかの小さな調整を実行できます(たとえば、
text-align: right
.width3
へ 素子)結果