html - html中的行更改css

Question

我有一个带有 Bootstrap 的表单:

<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">

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