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

Question

我想用html和css创建一个简单的均衡器gui，也许我可能是一些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