为什么第一个元素后有多余的空间

Question

$(document).on('click', '.item', function () {
var title = $(this).text();
var obj = $("<div class='line'> - </div><div class='crumb'>" + title + "</div>");
	obj.appendTo('#path');
});

.line{
display:inline-block;
margin:0 2px;
}
.crumb{
display:inline-block;
padding:0 7px;
background:gold;
}
.item{
cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='path' id='path'>
<div class='crumb'>home</div>
</div>
<br>
<div class='store'>
<div class='item'>lorem</div>
<div class='item'>ipsum</div>
</div>

点击lorem，ipsum，lorem ...

为什么第一个面包屑（home）和第一行（-）之间比第二个面包屑有多余的空间（大约2px）？

Answer 1

问题在这里-

<div class='path' id='path'>
  <div class='crumb'>home</div>
</div> <--- this div is counting that extra space.

更改-如果将最后一个关闭的div元素放在碎屑之后。它不会算作空间。

<div class='path' id='path'>
<div class='crumb'>home</div></div>

$(document).on('click', '.item', function () {
var title = $(this).text();
var obj = $("<div class='line'> - </div><div class='crumb'>" + title + "</div>");
	obj.appendTo('#path');
});

.line{
display:inline-block;
margin:0 2px;
}
.crumb{
display:inline-block;
padding:0 7px;
background:gold;
}
.item{
cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='path' id='path'>
<div class='crumb'>home</div></div>
<br>
<div class='store'>
<div class='item'>lorem</div>
<div class='item'>ipsum</div>
</div>

Answer 2

因为您在div关闭之前添加了空格。

该问题称为HTML块元素错误：您可以看到https://stackoverflow.com/a/19038859/4229270

$(document).on('click', '.item', function () {
var title = $(this).text();
var obj = $("<div class='line'> - </div><div class='crumb'>" + title + "</div>");
	obj.appendTo('#path');
});

.line{
display:inline-block;
margin:0 2px;
}
.crumb{
display:inline-block;
background:gold;
padding: 0px 7px;
}
.item{
cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='path' id='path'>
<div class='crumb'>home</div></div> <!-- Here was the issue -->
<br>
<div class='store'>
<div class='item'>lorem</div>
<div class='item'>ipsum</div>
</div>

希望这对您有所帮助。

Answer 3

空格是换行符，一种可能的解决方法是在父容器中添加font-size：0

$(document).on('click', '.item', function () {
var title = $(this).text();
var obj = $("<div class='line'> - </div><div class='crumb'>" + title + "</div>");
	obj.appendTo('#path');
});

.line{
display:inline-block;
margin:0 2px;
font-size: 16px;
}
.crumb{
display:inline-block;
padding:0 7px;
background:gold;
font-size: 16px;
}
.item{
cursor:pointer;
}
.path{ font-size: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='path' id='path'>
<div class='crumb'>home</div></div>
<br>
<div class='store'>
<div class='item'>lorem</div>
<div class='item'>ipsum</div>
</div>

Answer 4

css中有填充。

padding:0 7px;

将其更改为

padding:0 0px;

Answer 5

我不确定您为什么不使用Float。您没有使用$data = json_encode(array( 'meta' => $meta, 'data' => array_values($info), )); 的任何特定原因吗？

我建议您在CSS下面使用，一切都会正常工作。

float