javascript - 如何对齐文本和输入?
问题描述
我有这个使用 HTML 的代码:
<div id = "right">
<br /><br /><br />
<br />Parameter 1 : 10 <input type="range" min="10" max="40" step="0.01" value="10" class="slider" id="myRange" onchange="updateValue_Parameter_1(this.value);"> 40
<input type="text" id="textInput" value="">
<script>
function updateValue_Parameter_1(val) {document.getElementById('textInput').value="Parameter 1 = "+val;}
</script>
<br />Parameter 2 : -15 <input type="range" min="-15" step="0.01" max="-9" value="-15" class="slider" id="myRange1" onchange="updateValue_Parameter_2(this.value);"> -9
<input type="text" id="textInput1" value="">
<script>
function updateValue_Parameter_2(val) {document.getElementById('textInput1').value="Parameter 2 = "+val;}
</script>
<br /> Parameter 3 : -15 <input type="range" min="-15" step="0.01" max="-9" value="-15" class="slider" id="myRange2" onchange="updateValue_Parameter_3(this.value);"> -9
<input type="text" id="textInput2" value="">
<script>
function updateValue_Parameter_3(val) {document.getElementById('textInput2').value="Parameter 3 = "+val;}
</script>
<br />Parameter 4 : 7 <input type="range" min="7" max="9" value="7" step="0.01" class="slider" id="myRange3" onchange="updateValue_Parameter_4(this.value);"> 9
<input type="text" id="textInput3" value="">
<script>
function updateValue_Parameter_4(val) {document.getElementById('textInput3').value="Parameter 4 = "+val;}
</script>
<br />Parameter 5 : -8 <input type="range" min="-8" max="-5" step="0.01" value="-8" class="slider" id="myRange4" onchange="updateValue_Parameter_5(this.value);"> -5
<input type="text" id="textInput4" value="">
<script>
function updateValue_Parameter_5(val) {document.getElementById('textInput4').value="Parameter 5 = "+val;}
</script>
<br />Parameter 6 : 0 <input type="range" min="0" max="1" step="0.01" value="0" class="slider" id="myRange5" onchange="updateValue_Parameter_6(this.value);"> 1
<input type="text" id="textInput5" value="">
<script>
function updateValue_Parameter_6(val) {document.getElementById('textInput5').value="Parameter 6 = "+val;}
</script>
<br />Parameter 7 : 100 <input type="range" min="100" max="6000" step="0.01" value="100" class="slider" id="myRange6" onchange="updateValue_Parameter_7(this.value);"> 6000
<input type="text" id="textInput6" value="">
<script>
function updateValue_Parameter_7(val) {document.getElementById('textInput6').value="Parameter 7 = "+val;}
</script>
<br />Parameter 8 : 0 <input type="range" min="0" max="1" step="0.01" value="0" class="slider" id="myRange7" onchange="updateValue_Parameter_8(this.value);"> 1
<input type="text" id="textInput7" value="">
<script>
function updateValue_Parameter_8(val) {document.getElementById('textInput7').value="Parameter 8 = "+val;}
</script>
<br />Parameter 9 : 5 <input type="range" min="5" max="20" step="0.01" value="5" class="slider" id="myRange8" onchange="updateValue_Parameter_9(this.value);"> 20
<input type="text" id="textInput8" value="">
<script>
function updateValue_Parameter_9(val) {document.getElementById('textInput8').value="Parameter 9 = "+val;}
</script>
</div>
这会产生以下结果:
我想让范围类型的输入左对齐,文本类型的输入也左对齐,但我不知道该怎么做?我尝试使用 margin-left 但它产生了错误的结果......
解决方案
最简单的解决方案是为每个“列”设置固定宽度。这样,它们就会很好地对齐。
<label class='width1'>Parameter 1 : 10 </label>
<input class="width2 slider" type="range" min="10" max="40" step="0.01" value="10" id="myRange" onchange="updateValue_Parameter_1(this.value);">
<span class='width3'>40</span>
<input class='width4' type="text" id="textInput" value="" >
和你的CSS(例如)
.width1 {
width: 100px;
}
.width2 {
width: 150px;
}
.width3 {
width: 20px;
}
.width4 {
width: 80px;
}
这样他们都会对齐。
否则,您可以使用display:table
which 来模拟表格。
或者将所有值放在 HTML 表中。
或者你可以使用 Flexbox,justify-content:space-between;
但这可能有点棘手。
推荐阅读
- jquery - 全局变量不会填充来自 ajax 调用的数据
- c# - LinqToTwitter.TwitterQueryException:错误的身份验证数据
- c++ - 当已经存在同名的全局和局部变量时如何访问变量(c ++)?
- ruby-on-rails - rails:具有简单形式和设计的未定义方法 hmtl_safe
- c# - 有没有办法在 Unity 2018.1 中创建字幕系统?
- laravel - 数据透视表播种
- android - 如何定义一大组 imageViews?
- javascript - 响应 axios 请求。setState 无法读取响应对象
- node.js - 在节点中打开由 pdfkit 创建的 pdf 文件时出错
- python - Python输入停止计时器