Блог

Привет, ребята!

Итак, вот в чем проблема: у меня есть 3 таблицы, которые представляют собой 3 списка элементов. У меня есть 2 кнопки (отмена / отправить) под списками. Когда я добавляю строку в один из списков: кнопки ниже экранируются, перемещаясь вправо. Что за черт?

Если у кого-то есть идея, как это исправить, это сэкономит мне немного времени:https://jsfiddle.net/sqonLbv4 /

Большое спасибо

HTML

   <div class="cols3">
    <label for="field1">Field 1</label>
    <table id="tableField1"></table>
    <input id="field1" name="field1" type="text" />
    <button id="field1Add" name="field1Add" class="btn btnOrange" type="button" onclick="field1Add()">Add</button>
    <button id="field1Delete" name="field1Delete" class="btn btnBlack" type="button" onclick="field1Delete()">Delete last</button>
  </div>
  <div class="cols3">
    <label for="field2">Field 2</label>
    <table id="tableField2"></table>
    <input id="field2" name="field2" type="text" />
    <button id="field2Add" name="field2Add" class="btn btnOrange" type="button" onclick="field2Add()">Add</button>
    <button id="field2Delete" name="field2Delete" class="btn btnBlack" type="button" onclick="field2Delete()">Delete last</button>
  </div>
  <div class="cols3">
    <label for="field3">Field List 3</label>
    <table id="tableField3"></table>
    <input id="field3" name="field3" type="text" />
    <button id="field3Add" name="field3Add" class="btn btnOrange" type="button" onclick="Field3Add()">Add</button>
    <button id="field3Delete" name="field3Delete" class="btn btnBlack" type="button" onclick="field3Delete()">Delete last</button>
  </div>
</div>
<div id="btnsForm" class="subcontainer">
  <button id="btnCancel" name="btnCancel" class="btn btnBlack" type="button">Cancel</button>
  <button id="btnSubmit" name="btnSubmit" class="btn btnOrange" type="submit">Submit</button>
</div>
  

JS

 var field1 = document.querySelector("#field1");

function field1Add() {
  var table = document.querySelector("#tableField1");
  var cell = table.insertRow(0).insertCell(0);
  cell.innerHTML = field1.value;
}

function field1Delete() {
  var table = document.querySelector("#tableField1");
  table.deleteRow(0);
}

var fieldList2 = [];
var field2 = document.querySelector("#field2");

function field2Add() {
  var table = document.querySelector("#tableField2");
  var cell = table.insertRow(0).insertCell(0);
  cell.innerHTML = field2.value;
}

function field2Delete() {
  var table = document.querySelector("#tableField2");
  table.deleteRow(0);
}

var fieldList3 = [];
var field3 = document.querySelector("#field3");

function field3Add() {
  var table = document.querySelector("#tableField3");
  var cell = table.insertRow(0).insertCell(0);
  cell.innerHTML = field3.value;
}

function field3Delete() {
  var table = document.querySelector("#tableField3");
  table.deleteRow(0);
}
  

CSS (он же дьявол)

     box-sizing: border-box;
}

.subcontainer {
  padding: 0 2rem;
}

.cols3 {
  width: 33%;
  float: left;
  padding: 0 0.3rem 3rem;
}

.btn {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btnCentered {
  text-align: center;
}

.btnTitle {
  vertical-align: middle;
  margin-left: 2rem;
}

.btnOrange {
  background-color: chocolate;
  border-color: chocolate;
}

.btnOrange:hover {
  color: #fff;
  background-color: #000;
  border-color: #000;
}

.btnBlack {
  color: #000;
  border-color: #000;
}

.btnBlack:hover {
  color: #fff;
  background-color: #000;
  border-color: #000;
}

.btnBlack:active {
  color: #f16e00;
  border-color: #f16e00;
}

.btnsTable {
  white-space: initial;
}

#btnsForm {
  text-align: center;
}
  

В этом случае вы не должны использовать float: left для размещения объектов рядом друг с другом. В этом случае вы бы предпочли использовать flexbox. Измените CSS на это, чтобы они отображались рядом друг с другом:

 .cols3 {
    width: 33%;
    padding: 0 0.3rem 3rem;
}

#numbers {
    display: flex;
    justify-content: space-between;
}
  

редактировать: В настоящее время существуют более эффективные способы размещения объектов в определенных местах. Если вы хотите расположить несколько элементов по оси X или Y, есть то, что мы называем flexbox . Если вы хотите расположить несколько элементов как по оси X, так и по оси Y, есть grid .

Нашел это!

 .cols3 {
    width: 33%;
    padding: 0 0.3rem 3rem;
}

.subcontainer {
    display: flex;
}
  

Для части HTML все заголовки h3 были перемещены перед субконтейнером div.
При этом все исправлено.

Но, как сказал Терри, следовало использовать свойства сетки, это лучше, когда вы пытаетесь расположить объекты по X amp; Y позиции.

Спасибо