减少垂直对齐输入范围之间的间距

Question

我想创建一个简单的均衡器GUI使用HTML和CSS和我也许一些JS。我的问题是如何编辑垂直输入范围之前和之后的间距？正如您在对齐多个滑块时看到的那样，它们占用太多空间。如何处理这个??对于HTML部分我把各个输入元素在一个div，这样我可以彼此相邻使用“inline-block的”，你将代码粘贴下面

input.vertical { 
 
       -webkit-appearance: slider-vertical; 
 
       writing-mode: bt-lr; 
 
      } 
 
      .aligned { 
 
       display: inline-block; 
 
      } 
 
      .block{ 
 
       display: block; 
 
      } 
 
      input[type=range]{ 
 
       padding-left: 0px; 
 
       padding-right: 0px; 
 
      }

<div class="aligned"> 
 
      <p>Gain</p> 
 
      <input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical"> 
 
     </div> 
 
     <div class="aligned"> 
 
      <p>Gain</p> 
 
      <input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical"> 
 
     </div> 
 
     <div class="aligned"> 
 
      <form> 
 
       <label class="block"><input type="radio" name="radgroup" value="A"></label> 
 
       <label class="block"><input type="radio" name="radgroup" value="A"></label> 
 
       <label class="block"><input type="radio" name="radgroup" value="A"></label> 
 
       <label class="block"><input type="radio" name="radgroup" value="A"></label> 
 
       <label class="block"><input type="radio" name="radgroup" value="A"></label> 
 
      </form> 
 
     </div> 
 
     <div class="SF-container"> 
 
      <div class="aligned" style="padding-right: 0px; margin-left:0px; display: inline-block;"> 
 
       <p>Subsonic Filter</p> 
 
       <input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical"> 
 
      </div> 
 
      <div class="aligned"> 
 
       <input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical"> 
 
      </div> 
 
      <div class="aligned"> 
 
       <input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical"> 
 
      </div> 
 
      <div class="aligned"> 
 
       <input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical"> 
 
      </div> 
 
      <div class="aligned"> 
 
       <input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical"> 
 
      </div> 
 
      <div class="aligned"> 
 
       <input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical"> 
 
      </div> 
 
      <div class="aligned"> 
 
       <input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical"> 
 
      </div> 
 
      <div class="aligned"> 
 
       <input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical"> 
 
      </div> 
 
      <div class="aligned"> 
 
       <input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical"> 
 
      </div> 
 
      <div class="aligned"> 
 
       <input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical"> 
 
      </div> 
 
      <div class="aligned"> 
 
       <input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical"> 
 
      </div> 
 
     </div>

Answer 1

它们对齐

指定宽度怎么样？

input.vertical { 
    -webkit-appearance: slider-vertical; 
    width: 30px; 
} 

http://codepen.io/paulcredmond/pen/ORVbRp