我有使用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>
但这会产生以下结果:
实际上,我只想让我的输入类型范围对齐,就像其他输入一样。我试图增加标签的边距,但没有成功。
感谢您的帮助!
编辑:我想做的是:答案 0 :(得分:2)
可能最快的方法是使用Grid
布局,这也可以在没有媒体查询的情况下很好地适应视口。
将div
元素
<div>
<label class='width1'>R : [m] : 10 </label>
<input class='width2 slider' ...>
<span class='width3'>40</span>
<input class='width4' ...>
</div>
并将此样式赋予包装器
div {
display: grid;
grid-template-columns: 150px minmax(100px, 1fr) 50px minmax(50px, .25fr);
grid-gap: 1vw;
}
然后您可以执行一些小的调整(例如,向text-align: right
元素提供.width3
)
<强>结果强>
答案 1 :(得分:0)
您可以使用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>
答案 2 :(得分:0)
您必须在CSS中添加固定的width
才能正确对齐元素。
有关其他建议,请参阅此工作代码段中的评论:
(我移动了一些代码以使代码段更整洁/更好)
// 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;
});
});
&#13;
#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;
}
&#13;
<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>
&#13;
希望它有所帮助!
答案 3 :(得分:0)
你可以简单地制作表格和行,使它们完美对齐 如下面的代码。
<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>
&#13;
答案 4 :(得分:0)
由于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>