html中的行改变了css

Question

我有一个带引导程序的表单：

<form class="form-inline">
          <div class="form-group barkodiK">
            <input type="text" class="form-control barkodi" placeholder="Barkodi">
          </div>
          <div class="form-group produktiK">
            <datalist id='produktet'></datalist>
            <input list="produktet" class="form-control produkti" onkeyup="merrProduktet(this)" placeholder="Produkti">
          </div>
          <div class="form-group pershkrimiK">
            <datalist id='pershkrimiProdukteve'></datalist>
            <input list="pershkrimiProdukteve" class="form-control pershkrimi" placeholder="Pershkrimi">
          </div>
          <div class="form-group cmimiK">
            <input type="text" class="form-control cmimi" readonly placeholder="Çmimi">
          </div>
        </form>

这个表格给了我这个结果：

但如果我在编辑器行中进行此更改，它也会更改结构：

<form class="form-inline">
          <div class="form-group barkodiK">
            <input type="text" class="form-control barkodi" placeholder="Barkodi">
          </div>
          <div class="form-group produktiK">
            <datalist id='produktet'></datalist>
            <input list="produktet" class="form-control produkti" onkeyup="merrProduktet(this)" placeholder="Produkti">
          </div><div class="form-group pershkrimiK">
            <datalist id='pershkrimiProdukteve'></datalist>
            <input list="pershkrimiProdukteve" class="form-control pershkrimi" placeholder="Pershkrimi">
          </div>
          <div class="form-group cmimiK">
            <input type="text" class="form-control cmimi" readonly placeholder="Çmimi">
          </div>
        </form>

我有这个结果：

我甚至不知道为什么这个东西会影响HTML的CSS。有什么帮助吗？

Answer 1

由于表单输入以内联方式显示，因此您在第二个文件中删除的额外空间会使输入靠近在一起：

</div><div class="form-group pershkrimiK">

如果您想要框之间的空格，那就是它应该是什么：

</div>
<div class="form-group pershkrimiK">

当内联显示内容时，元素之间/周围的空白是可见的。