jQuery UI：多个垂直滑块在同一行上对齐

Question

我一直在努力在同一行上获得多个垂直UI滑块。 我想要的如下：1.同一行上有多个垂直UI滑块。 假设我要4个垂直滑块连续放置。 2.我希望在用户移动每个滑块时显示数字

我一直遵循的代码为我提供了每个滑块上的数字。 但是，当前这些滑块在另一个滑块的下面（在同一列中）...如何将它们转换为行格式

我试图通过拨弄来共享我的代码，但是遇到了困难。

如果有人可以帮助我解决此问题，我将不胜感激。

我的HTML + JS代码：

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Slider functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-4" ).slider({
               orientation:"vertical" 
            });
            $( "#slider-4" ).slider({
               orientation:"vertical",
               value:50,
               slide: function( event, ui ) {
                  $( "#minval4" ).val( ui.value );
               }  
            });
            $( "#minval4" ).val( $( "#slider-4" ).slider( "value" ) );
            $( "#slider-5" ).slider({
               orientation:"vertical",
               value:50,
               slide: function( event, ui ) {
                  $( "#minval5" ).val( ui.value );
               }  
            });
            $( "#minval5" ).val( $( "#slider-5" ).slider( "value" ) );
         });
      </script>
      <!-- Pasted your code here -->
      <style>
        [id^="slider-"] + p {
            float: left;
            margin-right: 1em;
          }
      </style>
   </head>
   <body>
      <!-- HTML --> 
         <div class="container">
         <div id="slider-4"></div>
         <p>
            <label for="minval4">Minumum value4:</label>
            <input type="text" id="minval4" 
               style="border:0; color:#b9cd6d; font-weight:bold;">
         </p>
         <div id="slider-5"></div>
         <p>
            <label for="minval5">Minumum value5:</label>
            <input type="text" id="minval5" 
               style="border:0; color:#b9cd6d; font-weight:bold;">
         </p>
       </div>
   </body>
</html>

Answer 1

首先，我将每个滑块和<p>移到了自己的部分：

  <div class="container">
     <section class="slider">
        <div id="slider-4"></div>
        <p>
           <label for="minval4">Minumum value4:</label>
           <input type="text" id="minval4" 
              style="border:0; color:#b9cd6d; font-weight:bold;">
        </p>            
     </section>
     <section class="slider">
        <div id="slider-5"></div>
        <p>
           <label for="minval5">Minumum value5:</label>
           <input type="text" id="minval5" 
              style="border:0; color:#b9cd6d; font-weight:bold;">
        </p>            
     </section>
   </div>

然后，我在</head>关闭之前添加了它：

  <style>
    section.slider {
     float: left;
    }
  </style>

代码 ： https : //gist.github.com/antibland/6c43a6f20d5fce3a3bc8ad7324731516