如何將標簽和滑條放在同一行上
[英]How do i put the label and slider on the same line
問題描述
這是我的代碼，它在一行上輸出滑塊，然后在其下一行上輸出標簽。 當id喜歡它們時，它們在同一行上彼此相鄰。
我嘗試在標簽和滑塊中使用顯示值，但似乎沒有任何區別。
任何幫助，將不勝感激。 提前謝謝。
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>
2 個解決方案
解決方案1
4 已采納 2017-09-06 16:31:38
您的.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>
解決方案2
1 2017-09-06 16:41:11
通過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>
我如何把它們放在同一條線上？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.