#html #css #forms
Вопрос:
Я бы хотел, чтобы флажки «Сторона 1» и «Сторона 4» были расположены по-разному. Я бы знал, что это будет сделано в CSS, я просто не могу заставить это работать сам. Заранее спасибо
lt;form class="calculator"gt; lt;label for="base_width"gt;Base Width (m)lt;/labelgt; lt;input type="number" value="1" min="1" max="20" step="1" id="base_width" name="base_width"gt; lt;label for="base_length"gt;Base Length (m)lt;/labelgt; lt;input type="number" value="1" min="1" max="20" sstep="1" id="base_length" name="base_length"gt; lt;label for="wall"gt;Wall Typelt;/labelgt; lt;select name="walltype" id="walltype"gt; lt;option value="40"gt;Inflatedlt;/optiongt; lt;option value="25"gt;Nettedlt;/optiongt; lt;/selectgt; lt;divgt; lt;pgt; Please choose where you want the walls placedlt;/pgt; lt;label for="wall_side1"gt;Side 1lt;/labelgt; lt;input type="checkbox" id="wall_side1" name="wall_side1"gt; lt;div style="display: inlineblock;"gt; lt;label for="wall_side2"gt;Side 2lt;/labelgt; lt;input type="checkbox" id="wall_side2" name="wall_side2"gt; lt;img src="https://usabilla.com/graphics/resources/usabilla-logo.png" width="100" height="auto" alt="" gt; lt;label for="wall_side3"gt;Side 3lt;/labelgt; lt;input type="checkbox" id="wall_side3" name="wall_side3"gt; lt;/divgt; lt;label for="wall_side4"gt;Side 4lt;/labelgt; lt;input type="checkbox" id="wall_side4" name="wall_side4"gt; lt;/divgt; lt;label for="ceiling"gt;Ceilinglt;/labelgt; lt;select name="ceiling" id="ceiling"gt; lt;option value="1"gt;Yeslt;/optiongt; lt;option value="0"gt;Nolt;/optiongt; lt;/selectgt; lt;label for="tunnels"gt;Tunnelslt;/labelgt; lt;input type="number" value="0" min="0" max="20" step="1" id="tunnel" name="tunnel"gt; lt;label for="slides"gt;Slideslt;/labelgt; lt;input type="number" value="0" min="0" max="20" step="1" id="slide" name="slide"gt; lt;input type="button" value="Calculate" onclick="calculate()"gt; lt;spangt;Total: $lt;/spangt; lt;span id="totalvalue"gt;lt;/spangt; lt;script type="text/javascript" src="calc.js"gt;lt;/scriptgt; lt;/formgt; Ответ №1:
Что-то в этом роде?
div { text-align: center;} label {margin: 10px ;} label:first-of-type, label:last-of-type {display: block;} lt;divgt; lt;labelgt;Side 1lt;input type="checkbox" /gt;lt;/labelgt; lt;labelgt;Side 2lt;input type="checkbox" /gt;lt;/labelgt; lt;img src="https://usabilla.com/graphics/resources/usabilla-logo.png" width="100" height="auto" alt="" gt; lt;labelgt;Side 3lt;input type="checkbox" /gt;lt;/labelgt; lt;labelgt;Side 4lt;input type="checkbox" /gt;lt;/labelgt; lt;/divgt; Комментарии:
1. Да, это прекрасно, однако не могли бы вы также центрировать все внутри формы, чтобы она оставалась согласованной. Это было бы очень ценно, но не позволяйте этому занимать вас
2. Вы пробовали сделать основное:
lt;stylegt;form{text-align: center;}lt;/stylegt;? кажется, что это все центрирует.