Я делаю калькулятор, в котором кто-то может добавлять и удалять поля ввода с помощью JavaScript. Я реализовал макет flexbox для раздела, содержащего поля ввода и кнопки. Текущая структура CSS помещает все элементы (поля ввода и кнопки) в столбец, поскольку для родительского контейнера установлено значение flex-direction: column;.
Проблема в том, что мои кнопки также располагаются в столбце, и я хочу, чтобы он был выровнен по горизонтали. Я не могу обернуть кнопки в div, так как это будет мешать моему JavaScript.
function addClass(){
let container = document.getElementById("input-field-1").parentNode;
let fieldLength = container.getElementsByClassName("inputfield").length;
let inputField = document.getElementById("input-field-1");
let clone = inputField.cloneNode(true);
clone.id = "input-field-" + (fieldLength + 1);
let classNumber = fieldLength + 1;
let inputs = clone.getElementsByTagName("input");
inputs[0].placeholder = "Class "+ classNumber;
inputs[0].value = "";
inputs[1].value = "";
inputs[2].value = "";
let addButton = document.getElementById("add-btn");
container.insertBefore(clone, addButton);
}.semester-calc {
display: flex;
align-items: center;
flex-direction: column;
}<div class = "semester-calc">
<div class = "inputfield" id = "input-field-1">
<input class = "class-name" type = "text" placeholder = "Class 1">
<input class = "grade-val" type = "text" placeholder = "Grade">
<input class = "credit-val" type = "text" placeholder = "Credits">
</div>
<!-- Additional input fields -->
<button id = "add-btn" onclick = "addClass()">Add Class</button>
<button id = "remove-btn" onclick = "remove()">Remove Class</button>
<button id = "clear-btn" onclick = "clearClass()">Clear Classes</button>
<button id = "calculate-gpa" onclick = "calculate()">Calculate!</button>
</div>Проблема: я хочу, чтобы кнопки располагались горизонтально под полями ввода, но flexbox заставляет их выравниваться в столбец. Помещение его в div, похоже, мешает настройке моего родительского контейнера javascript, поэтому я не хочу этого делать. Есть ли способ выровнять кнопки по горизонтали, не изменяя мой javascript, или мне нужно просто переделать функцию addClass?
🤔 А знаете ли вы, что...
JavaScript является одним из трех основных языков веб-разработки, вместе с HTML и CSS.
Вы можете сделать кнопки встроенными элементами:
.semester-calc:nth-child(-n + 3){
display: inline;
}
Это своего рода хак, но он будет работать так, как вы ожидаете:
function addClass(){
let container = document.getElementById("input-field-1").parentNode;
let fieldLength = container.getElementsByClassName("inputfield").length;
let inputField = document.getElementById("input-field-1");
let clone = inputField.cloneNode(true);
clone.id = "input-field-" + (fieldLength + 1);
let classNumber = fieldLength + 1;
let inputs = clone.getElementsByTagName("input");
inputs[0].placeholder = "Class "+ classNumber;
inputs[0].value = "";
inputs[1].value = "";
inputs[2].value = "";
let addButton = document.getElementById("add-btn");
container.insertBefore(clone, addButton);
}.semester-calc {
display: flex;
align-items: center;
flex-direction: column;
}
.semester-calc:nth-child(-n + 3){
display: inline;
}<div class = "semester-calc">
<div class = "inputfield" id = "input-field-1">
<input class = "class-name" type = "text" placeholder = "Class 1">
<input class = "grade-val" type = "text" placeholder = "Grade">
<input class = "credit-val" type = "text" placeholder = "Credits">
</div>
<!-- Additional input fields -->
<button id = "add-btn" onclick = "addClass()">Add Class</button>
<button id = "remove-btn" onclick = "remove()">Remove Class</button>
<button id = "clear-btn" onclick = "clearClass()">Clear Classes</button>
<button id = "calculate-gpa" onclick = "calculate()">Calculate!</button>
</div>