复选框的定位

Question

我想把" Side 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>

Answer 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>