时间戳

首页 > 解决方案 > 在上方列表中添加字段后，css按钮正在移动

css - 在上方列表中添加字段后，css按钮正在移动

问题描述

大家好 ！

所以这就是问题所在：我有 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;
}

标签： cssdombutton

解决方案

找到了 ！

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

.subcontainer {
    display: flex;
}

对于 HTML 部分，所有标题 h3 都已移到div 子容器之前。有了这个，一切都解决了。

但就像特里说的那样，应该使用网格属性，当你尝试在 X 和 Y 位置排列对象时会更好。

谢谢

推荐阅读