我如何將標籤和滑塊放在同一行上

這是我的代碼，它將滑塊輸出到一行，然後輸出它下面一行的標籤。當id像他們在同一行中彼此相鄰。我如何將標籤和滑塊放在同一行上

我試過在標籤和滑塊中使用顯示值，但它似乎沒有任何區別。

任何幫助，將不勝感激。 Thx提前。

var slider = document.getElementById("myRange"); 
 
var output = document.getElementById("demo"); 
 
output.innerHTML = slider.value; 
 

 
slider.oninput = function() { 
 
    output.innerHTML = this.value; 
 
}

#slidecontainer { 
 
    width: 70%; 
 
} 
 

 
.slider { 
 
    -webkit-appearance: none; 
 
    width: 100%; 
 
    height: 25px; 
 
    background: #d3d3d3; 
 
    outline: none; 
 
    opacity: 0.7; 
 
    -webkit-transition: .2s; 
 
    transition: opacity .2s; 
 
} 
 

 
.slider:hover { 
 
    opacity: 1; 
 
} 
 

 
.slider::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
    appearance: none; 
 
    width: 25px; 
 
    height: 25px; 
 
    background: #4CAF50; 
 
    cursor: pointer; 
 
} 
 

 
.slider::-moz-range-thumb { 
 
    width: 25px; 
 
    height: 25px; 
 
    background: #4CAF50; 
 
    cursor: pointer; 
 
} 
 

 
input { 
 
    display: inline-block; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    float: left; 
 
}

<h1>Custom Range Slider</h1> 
 
<p>Drag the slider to display the current value.</p> 
 

 
<div id="slidecontainer"> 
 
    <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> 
 
    <label>Value: <span id="demo" display=inline float=left></span></label> 
 
</div>

來源

2017-09-06 croc_hunter

你.slider CSS類有width:100%集它，不留下任何餘地的標籤。降低該值可解決問題。

此外，您的input和label CSS規則在這裏沒有任何幫助，您應該刪除它們。

最後，您span保存滑塊的值無效：

<span id="demo" display=inline float=left>

display和float是CSS屬性，而不是HTML屬性，並且不設置這種方式。只要刪除它們。

<!DOCTYPE html> 
 
<html> 
 
<style> 
 
#slidecontainer { 
 
    width: 70%; 
 
} 
 

 
.slider { 
 
    -webkit-appearance: none; 
 
    width: 80%; /* <-- Problem was here when width is 100% */ 
 
    height: 25px; 
 
    background: #d3d3d3; 
 
    outline: none; 
 
    opacity: 0.7; 
 
    -webkit-transition: .2s; 
 
    transition: opacity .2s; 
 
} 
 

 
.slider:hover { 
 
    opacity: 1; 
 
} 
 

 
/* This rule causes the label to vertically align properly */ 
 
label { 
 
    vertical-align:middle; 
 
    display:inline-block; 
 
    margin-bottom:1em; 
 
} 
 

 
.slider::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
    appearance: none; 
 
    width: 25px; 
 
    height: 25px; 
 
    background: #4CAF50; 
 
    cursor: pointer; 
 
} 
 

 
.slider::-moz-range-thumb { 
 
    width: 25px; 
 
    height: 25px; 
 
    background: #4CAF50; 
 
    cursor: pointer; 
 
} 
 

 

 

 
</style> 
 
<body> 
 

 
    <h1>Custom Range Slider</h1> 
 
    <p>Drag the slider to display the current value.</p> 
 

 
    <div id="slidecontainer"> 
 
    <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> 
 
    <label>Value: <span id="demo"></span></label> 
 
    </div> 
 

 
    <script> 
 
    var slider = document.getElementById("myRange"); 
 
    var output = document.getElementById("demo"); 
 
    output.innerHTML = slider.value; 
 

 
    slider.oninput = function() { 
 
     output.innerHTML = this.value; 
 
    } 
 
    </script> 
 

 
</body> 
 
</html>

來源

2017-09-06 16:31:38

非常感謝。 –

對不起還有一個問題，我如何將標籤居中到滑塊。使用上面的代碼將標籤對齊到滑塊的底部，實際上看起來略低於它。 –

@croc_hunter查看我更新的答案。 'label'元素被修改，以便它可以添加一個邊距。然後添加底部邊距。不要忘記標記爲「答案」。 –

這是通過Flexbox很簡單，我只增加了2行：

#slidecontainer { 
    width: 70%; 
    display: flex; 
    flex-direction: row; 
}

這裏是片段：

var slider = document.getElementById("myRange"); 
 
    var output = document.getElementById("demo"); 
 
    output.innerHTML = slider.value; 
 

 
    slider.oninput = function() { 
 
     output.innerHTML = this.value; 
 
    }

#slidecontainer { 
 
    width: 70%; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.slider { 
 
    -webkit-appearance: none; 
 
    width: 100%; 
 
    height: 25px; 
 
    background: #d3d3d3; 
 
    outline: none; 
 
    opacity: 0.7; 
 
    -webkit-transition: .2s; 
 
    transition: opacity .2s; 
 
} 
 

 
.slider:hover { 
 
    opacity: 1; 
 
} 
 

 
.slider::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
    appearance: none; 
 
    width: 25px; 
 
    height: 25px; 
 
    background: #4CAF50; 
 
    cursor: pointer; 
 
} 
 

 
.slider::-moz-range-thumb { 
 
    width: 25px; 
 
    height: 25px; 
 
    background: #4CAF50; 
 
    cursor: pointer; 
 
} 
 

 
input { 
 
    display:inline; 
 
} 
 

 
label { 
 
    display:inline; 
 
    float: left; 
 
    width: 30%; 
 
}

<h1>Custom Range Slider</h1> 
 
<p>Drag the slider to display the current value.</p> 
 

 
<div id="slidecontainer"> 
 
    <input type="range" min="1" max="100" value="50" class="slider" id="myRange" > 
 
    <label>Value: <span id="demo" display=inline float=left></span></label> 
 
</div>

來源

2017-09-06 16:41:11

謝謝。當我嘗試在我的大型程序中使用它時，它不起作用。 css的flex屬性究竟做了什麼？我不認爲我完全理解爲什麼這應該起作用。 –

柔性行爲也取決於其他元素。但是，如果您使用Flexbox，最好的方法是使用flexbox編寫所有標記。我建議您查看Flexbox文檔以獲得基本的理解，這不是很難使用 –

我如何將標籤和滑塊放在同一行上

回答

相關問題