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

Question

我想使用 html 和 css 以及我的一些 JS 创建一个简单的均衡器 gui。我的问题是如何编辑垂直输入范围前后的间距？正如您在对齐多个滑块时看到的那样，它们占用了太多空间。这个怎么处理？？对于 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