Question

我刚刚开始学习html，css和js，最近我不得不在一个合理的网站上创建价格滑块范围。

我想知道如何重新定位它。我已经从这个链接复制了整个代码http://jqueryui.com/slider/#range但是，定位位于Web浏览器的顶部，它也占用了浏览器的整个宽度。反正我有没有像adidas网页那样做呢？ http://shop.adidas.com.sg/men.html 在网络浏览器的一侧，尺寸有点小？

非常抱歉，如果我听起来非常愚蠢，但我没有经验。

Answer 1

我会冒险猜测你只是没有将它放在div中，因此它占据了100％的页面体，而不是100％的div大小，如你所需。

希望这有帮助，在我下班回家之前给你最后一分钟的想法大声笑

此致利安

Answer 2

塑造组件看起来的方式你需要使用CSS。

1选项是在滑块html元素周围创建一个div标签，并使用css使用width属性更改其边。

＆＃13;

#divContainingSlider {
  width: 100px;
}

＆＃13;

Answer 3

访问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>

价格范围滑块的定位

3 个答案: