复选框的位置答案

【问题标题】：Positioning of checkboxes复选框的位置
【发布时间】：2021-10-28 21:32:58
【问题描述】：

我希望“第 1 面”和“第 4 面”复选框的位置不同。我会知道这将在 CSS 中完成，但我似乎无法让它自己工作。提前致谢

<form class="calculator">
                    <label for="base_width">Base Width (m)</label>
                    <input type="number" value="1" min="1" max="20" step="1" id="base_width" name="base_width">
            
                    <label for="base_length">Base Length (m)</label>
                    <input type="number" value="1" min="1" max="20" sstep="1" id="base_length" name="base_length">
            
                    <label for="wall">Wall Type</label>
                        <select name="walltype" id="walltype">
                            <option value="40">Inflated</option>
                            <option value="25">Netted</option>
                        </select>
                    
                    <div>
                       <p> Please choose where you want the walls placed</p>
                        <label for="wall_side1">Side 1</label>
                        <input type="checkbox" id="wall_side1" name="wall_side1">
            
                        <div style="display: inlineblock;">
                            <label for="wall_side2">Side 2</label>
                            <input type="checkbox" id="wall_side2" name="wall_side2">
            
                           <img src="https://usabilla.com/graphics/resources/usabilla-logo.png" width="100" height="auto" alt="" >
            
                            <label for="wall_side3">Side 3</label>
                            <input type="checkbox" id="wall_side3" name="wall_side3">
                        </div>
                        <label for="wall_side4">Side 4</label>
                        <input type="checkbox" id="wall_side4" name="wall_side4">
                    </div>
                    <label for="ceiling">Ceiling</label>
                        <select name="ceiling" id="ceiling">
                            <option value="1">Yes</option>
                            <option value="0">No</option>
                        </select>
            
                    <label for="tunnels">Tunnels</label>
                    <input type="number" value="0" min="0" max="20" step="1" id="tunnel" name="tunnel">
                    
                    <label for="slides">Slides</label>
                    <input type="number" value="0" min="0" max="20" step="1" id="slide" name="slide">
            
                    <input type="button" value="Calculate" onclick="calculate()">
            
                    <span>Total: $</span>
                    <span id="totalvalue"></span>
                    <script type="text/javascript" src="calc.js"></script>
            
                </form>

【问题讨论】：

标签： html css forms

【解决方案1】：

类似的东西？

div { text-align: center;}
label {margin: 10px ;}
label:first-of-type,
label:last-of-type {display: block;}

<div>
  <label>Side 1<input type="checkbox" /></label>
  <label>Side 2<input type="checkbox" /></label>
  <img src="https://usabilla.com/graphics/resources/usabilla-logo.png" width="100" height="auto" alt="" >
  <label>Side 3<input type="checkbox" /></label>
  <label>Side 4<input type="checkbox" /></label>
</div>

【讨论】：

是的，这很完美，但是您是否也可以将表单中的所有内容居中以保持一致。非常感谢您，但不要让它让您忙碌
你有没有尝试做基本的：<style>form{text-align: center;}</style>？似乎它以一切为中心。