價格範圍滑塊的定位

我剛開始學習html，css和js，最近我不得不在一個合理的網站中創建一個價格滑塊範圍。價格範圍滑塊的定位

我想知道如何重新定位它。我已經從這個鏈接複製了整個代碼http://jqueryui.com/slider/#range但是，定位位於網絡瀏覽器的頂部，它佔用了瀏覽器的整個寬度有沒有反正我可以讓它像阿迪達斯網頁一樣它？ http://shop.adidas.com.sg/men.html 在網絡瀏覽器的一側，尺寸有點小？

非常抱歉，如果我聽起來非常笨，但我沒有經驗。

來源

2016-05-18 Rind

請先嚐試希望有人來救一天你面前的東西。 –

訪問https://jsfiddle.net/vexsc7d8/1/

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Slider - Range slider</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
/**** In style.css add class .container { float:left; width:200px;} ****/ 
    <script> 
    $(function() { 
    $("#slider-range").slider({ 
     range: true, 
     min: 0, 
     max: 500, 
     values: [ 75, 300 ], 
     slide: function(event, ui) { 
     $("#amount").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]); 
     } 
    }); 
    $("#amount").val("$" + $("#slider-range").slider("values", 0) + 
    " - $" + $("#slider-range").slider("values", 1)); 
    }); 
    </script> 
</head> 
<body> 

<p> 
    <label for="amount">Price range:</label> 
    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> 
</p> 
<div class="container"> 
    <div id="slider-range"></div> 
</div> 

</body> 
</html>

來源

2016-05-18 16:36:28

我會冒險猜測你只是沒有把它放在一個div中，因此它佔用了100％的頁面體而不是100％的div大小，因爲你需要。

希望這有助於，只爲你一個最後一分鐘的想法在我走之前下班回家笑

問候利亞姆

來源

2016-05-18 16:01:01

塑造一個組件看起來你需要使用CSS的方式。

1選項是圍繞滑塊html元素創建div標籤，並使用css使用width屬性更改其邊。

#divContainingSlider { 
 
    width: 100px; 
 
}

來源

2016-05-18 16:04:19 Andrei

價格範圍滑塊的定位

回答

相關問題