減少垂直對齊輸入範圍之間的間距

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