带有style.width的空格将不起作用

Question

我想制作一个动态间隔物，以使optionland中的框与mainland中的框对齐。

这是我的代码：

function expand(item, readonly) {
  let options = Array.from(document.getElementById('optionland').children);
  let mains = Array.from(document.getElementById('mainland').children);
  let opt = null;
  let mleft = 0,
    end = false;
  let spacer = document.getElementById('spacer');
  options.forEach((e, i, a) => {
    if (e === spacer) return;
    if (e.getAttribute('item') === item) {
      opt = e;
      end = true;
    } else {
      if (end) {} else {
        mleft += parseInt(mains[i - 1].style.width.replace(/px/g, "")) + 2;
      }
    }
  });
  if (!opt) {
    // console.log("Couldn't find child with attribute item: " + item);
    return;
  } else {
    opt.style.display = 'grid';
    if (readonly === 0)
      opt.setAttribute('ic', 'true');
    // console.log(mleft);
    spacer.style.display = "block";
    // console.log(spacer.style.width = mleft.toString() + "px");
    spacer.style.width = spacer.style.width + " !important";
    // console.log(spacer.style.width);
    // console.log(spacer);
  }
}

function collapseic(item) {
  Array.from(document.getElementById('optionland').children).forEach((e, i, a) => {
    if (e.getAttribute('item') === item) {
      if (e.getAttribute('ic') === 'false')
        e.style.display = 'none';
    }
  });
}

function collapseall() {
  let spacer = document.getElementById('spacer');
  spacer.display = 'none';
  Array.from(document.getElementById('optionland').children).forEach((e, i, a) => {
    e.setAttribute('ic', 'false');
    collapseic(e.getAttribute('item'));
  });
}

#content div#mainland {
  grid-area: main;
}

#content div#mainland span {
  display: table-cell;
  /* setting span vertically aligned */
  vertical-align: middle;
  /* setting span vertically aligned */
  font-size: 13px;
  font-family: 'Fira Mono', monospace;
  max-height: 50px;
  min-height: 50px;
}

#content div#mainland div {
  border: solid 1px;
  display: table;
  /* setting span vertically aligned */
  text-align: center;
  height: 50px;
  max-height: 50px;
  min-height: 50px;
  float: left;
}

#content div#mainland div#addbut {
  width: 50px;
}

#content div#optionland div#addopt {
  width: 52px;
}

#content div#optionland div {
  display: grid;
  grid-template-areas: 'dnameb''dlenb''saveb';
  float: left;
  width: 120px !important;
}

#content div#optionland div input {
  box-sizing: border-box;
  background-color: #020202;
  color: white;
  border: 2px solid #cacaca;
  width: 100%;
}

#content div#optionland div .naming {
  grid-area: dnameb;
  height: 30px;
  background-color: #020202;
}

#content div#optionland div .length {
  grid-area: dlenb;
  height: 30px;
}

#content div#optionland div#addopt .save {
  grid-area: saveb;
  background-color: #020202;
  text-align: center;
  text-decoration: none;
  padding: 3px;
  font-size: 15px;
  -webkit-transition-duration: 0.2s;
  /* Safari */
  transition-duration: 0.2s;
  box-shadow: 0 4px 0 0 grey;
}

#content div#optionland div .save:hover {
  background-color: white;
  color: black;
  cursor: pointer;
}

#content div#optionland div .save:active {
  background-color: grey;
  box-shadow: 0 2px 0px 0px #404040;
  transform: translateY(3px);
}

#content div#optionland {
  grid-area: opts;
  display: grid;
  grid-template-areas: '. .';
  grid-auto-columns: min-content;
}

<div id='content'>
  <div id='mainland' scale='1' <!--variable for JS-->>
    <div onclick="collapseall();expand('1',0)" onmouseenter="collapseall();expand('1', 1)" onmouseleave="collapseic('1')" id='addbut' style='width: 50px;'>
      <span>as</span>
    </div>
    <div onclick="collapseall();expand('0',0)" onmouseenter="collapseall();expand('0', 1)" onmouseleave="collapseic('0')" id='addbut' style='width: 50px;'>
      <span>+</span>
    </div>
  </div>
  <div id='optionland'>
    <div id='spacer' style="width: 0px !important;">
      <br>
    </div>
    <div item='1' ic='false'>
      <input placeholder="Nazwa" type="text" class='opt naming'>
      <input placeholder="30" type="text" class='opt length'>
    </div>
    <div id='addopt' item='0' ic='false'>
      <input placeholder="Nazwa" type="text" id='addn' class='opt naming'>
      <input placeholder="30" type="text" id='addl' class='opt length'>
      <input type="button" onclick='' id='adds' value='Nowy' class='opt save'>
    </div>
  </div>
</div>

将鼠标悬停在addbtn上之后，屏幕左侧之间没有间隙。我尝试将style.marginLeft的宽度设置为所有项目的宽度，但这没有用。

在控制台中，我得到52（最左边）52px（style.width = mleft + px），并用style="width:0px !important; display:block;"分隔。我不知道为什么spacer没有将宽度设置为52 :(
将鼠标悬停在第一项上可以使我剩下2个像素，但是spacer的宽度仍然为0px。无论我尝试什么，每次都有120px的间隙或根本没有间隙。 我不知道bug在哪里，所以我认为这里有人可以提供帮助。

编辑： 我在optionland的所有div中从width：120px删除了！important，并在CSS中的allopt中删除了width：52，现在可以了！