Question

有一种方法可以将滑块和按钮放在画布旁边吗？我尝试使用<div>样式，但它会将滑块移到页面顶部或页面底部。这是我的HTML代码：

<body>
    <div style="margin: 0px auto; width: 512px;">
        <h1>Model of a Robot</h1>
        <div style="margin-top: 30px; margin-bottom: 30px;">
        <canvas id="gl-canvas" width="512" height="512">
             Oops ... your browser doesn't support the HTML5 canvas element
        </canvas>
    <button id= "switchProj">Change Projection type</button>
    <div>
        body angle -180 <input id="bodySlider" type="range"
        min="-180" max="180" step="10" value="0"
        />
        180
    </div>
    <div>
         head angle -45 <input id="headSlider" type="range"
         min="-45" max="45" step="5" value="0"
         />
         45
    </div>
    <div id="leftArmSlider">
        left arm angle -90 <input id="leftArmSlider" type="range"
        min="-90" max="-30" step="10" value="-30"
        />
        -30
    </div>
    <div id="rightArmSlider">
         right arm angle 30 <input id="rightArmSlider" type="range"
         min="30" max="90" step="10" value="30"
         />
         90
    </div>
    <div>
        left leg angle -30 <input id="leftLegSlider" type="range"
        min="-30" max="30" step="5" value="0"
        />
        30
    </div>
    <div>
        right leg angle -30 <input id="rightLegSlider" type="range"
        min="-30" max="30" step="5" value="0"
        />
        30
    </div>
    <div>
        zNear .01<input id="zNearSlider" type="range"
        min=".01" max="4" step="0.1" value="0.3" />
        4
    </div>
    <div>
        zFar 1<input id="zFarSlider" type="range"
        min="1" max="10" step="1.0" value="5" />
        10
    </div>
    <div>
        fov 10<input id="fovSlider" type="range"
        min="10" max="120" step="5" value="70" />
        120
    </div>
    <div>
        aspect 0.5<input id="aspectSlider" type="range"
        min="0.5" max="2" step="0.1" value="1" />
        2
    </div>
</body>

Answer 1

好吧OP！首先，如果你不想自己编写很多CSS，我会建议你使用Bootstrap或类似的东西。以下是使用Bootstrap类的建议：

<body>
<div class="row">
    <div style="margin: 0px auto; width: 512px;" class="col-sm-9">
        <h1>Model of a Robot</h1>
        <div style="margin-top: 30px; margin-bottom: 30px;">
            <canvas id="gl-canvas" width="512" height="512">
                 Oops ... your browser doesn't support the HTML5 canvas element
            </canvas>
        </div>
    </div>
    <div class="col-sm-3">
        //sliders and stuff in here
    </div>
</div>
</body>

这不是完美的或任何事情，我怀疑它对你的项目没有调整它会起作用，但我认为它可能是你最小阻力的道路。

Answer 2

这是该页面的屏幕截图！

HTML-将滑块放在画布旁边

2 个答案: