Question

在原始div的元素之间有一个奇怪的间距，在html中编码，但无论如何我无法删除它。

<body>
  <form class='myform'>
    <div class='form-block'>
      <span class='line'>1</span>
      <button class='new-line'>New Line</button>
      <button class='new-nested'>New Nested Line</button>
      <input class='input' type='text' placeholder='Enter Value...'>
      <button class='new-input'>Add input</button>
    </div>
  </form>
</body>

请在这里找到小提琴：

＆＃13;

function createNode() {
    var div = document.createElement('div');
    div.setAttribute('class', 'form-block');
    var span = document.createElement('span');
    span.setAttribute('class', 'line');
    var b1 = document.createElement('button');
    b1.setAttribute('class', 'new-line');
    b1.textContent = 'New Line';
    var b2 = document.createElement('button');
    b2.setAttribute('class', 'new-nested');
    b2.textContent = 'New Nested Line';
    var b3 = document.createElement('button');
    b3.setAttribute('class', 'new-input');
    b3.textContent = 'Add input';
    var ip = document.createElement('input');
    ip.setAttribute('class', 'input');
    ip.setAttribute('type', 'text');
    ip.setAttribute('placeholder', 'Enter Value...');
    div.insertAdjacentHTML("beforeend", span.outerHTML);
    div.insertAdjacentHTML("beforeend", b1.outerHTML);
    div.insertAdjacentHTML("beforeend", b2.outerHTML);
    div.insertAdjacentHTML("beforeend", ip.outerHTML);
    div.insertAdjacentHTML("beforeend", b3.outerHTML);

    var d2 = document.getElementsByClassName("form-block")[0];
    return div;
};

function newLine() {
    console.log("new line");
    var toBeAdded = createNode();
    var theDivParent = this.parentElement.parentElement;
    var previousLast;
    var had = theDivParent.lastChild.hasChildNodes();
    if (had) {
        previousLast = theDivParent.lastChild.getElementsByClassName("line")[0].innerText.split(".");
        var len = previousLast.length;
        var num = parseInt(previousLast[len - 1]);
        num++;
        previousLast[len - 1] = num;
    }
    theDivParent.insertAdjacentHTML("beforeend", toBeAdded.outerHTML);
    var len = theDivParent.getElementsByClassName("form-block").length;
    if (!had) {
        theDivParent.lastChild.getElementsByClassName("line")[0].innerText = 2;
    } else {
        theDivParent.lastChild.getElementsByClassName("line")[0].innerText = previousLast.join(".");
    }
    theDivParent.lastChild.getElementsByClassName("new-line")[0].onclick = newLine;
    theDivParent.lastChild.getElementsByClassName("new-input")[0].onclick = newInput;
    theDivParent.lastChild.getElementsByClassName("new-nested")[0].onclick = newNested;
    return false;
};

function newNested() {
    console.log("new line");
    var toBeAdded = createNode();
    var theDiv = this.parentElement;
    theDiv.insertAdjacentHTML("beforeend", toBeAdded.outerHTML);
    var len = theDiv.getElementsByClassName("form-block").length;
    theDiv.lastChild.getElementsByClassName("line")[0].innerText = theDiv.getElementsByClassName("line")[0].innerText + "." + len;
    theDiv.lastChild.getElementsByClassName("new-line")[0].onclick = newLine;
    theDiv.lastChild.getElementsByClassName("new-input")[0].onclick = newInput;
    theDiv.lastChild.getElementsByClassName("new-nested")[0].onclick = newNested;
    return false;
};

function newInput() {
    console.log("new input");
    var elem = document.getElementsByClassName("input");
    this.insertAdjacentHTML("beforebegin", elem[0].outerHTML);
    return false;
};

document.getElementsByClassName("new-input")[0].onclick = newInput;

document.getElementsByClassName("new-line")[0].onclick = newLine;

document.getElementsByClassName("new-nested")[0].onclick = newNested;

document.getElementsByClassName("myform")[0].onsubmit = function () {
    return false;
}

＆＃13;

div {
    padding: 0;
    margin: 0;
    background: green;
}

button {}

input {}

span {
    background: red;
}

＆＃13;

<body>
    <form class='myform'>
        <div class='form-block'>
            <span class='line'>1</span>
            <button class='new-line'>New Line</button>
            <button class='new-nested'>New Nested Line</button>
            <input class='input' type='text' placeholder='Enter Value...'>
            <button class='new-input'>Add input</button>
        </div>
    </form>
</body>

＆＃13;

Answer 1

阅读本文：https://css-tricks.com/fighting-the-space-between-inline-block-elements/ HTML在内联块元素之间创建空格。当您按CTRL + A时，您可以看到单个空格。为了对抗这个空间你可以做以下事情（在arcticle中提到）：
打开上一行的标签：

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

在新行上添加最后一个右括号：

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

或者将评论从上一行开始到下一行。

<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

我希望这会有所帮助：）

Answer 2

您可以使用float css属性删除元素之间的空格。

<body>
<form class='myform'>
<div class='form-block'>
  <span class='line floated'>1</span>
  <button class='new-line floated'>New Line</button>
  <button class='new-nested floated'>New Nested Line</button>
  <input class='input floated' type='text' placeholder='Enter Value...'>
  <button class='new-input floated'>Add input</button>
</div>

.floated {
   float:left;
}

在此处更新了JS小提琴：https://jsfiddle.net/ranjitsachin/LL7n983c/1/

Answer 3

将此样式添加到css文件中：

button { float: left; }

JSFiddle

Answer 4

here is update fiddle

我删除了

之类的标签之间的空格

<span class='line'>1</span><button class='new-line'>New Line</button><button class='new-nested'>New Nested Line</button><input class='input' type='text' placeholder='Enter Value...'><button class='new-input'>Add input</button>

第一个div块有一个奇怪的风格，我无法删除

4 个答案: