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

Reduce the Spacing between vertically aligned input ranges

本文关键字:之间 范围 输入 垂直 对齐      更新时间:2023-09-26

我想创建一个简单的均衡器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>

如何指定宽度?

 input.vertical {
    -webkit-appearance: slider-vertical;
    width: 30px;
 }
http://codepen.io/paulcredmond/pen/ORVbRp