动态附加

Question

我有一个用户可以选择的选项列表，当用户单击该选项的按钮时，有一个jquery实现删除按钮并在页面顶部附加一个标记，用户可以选择通过单击标记上的“X”来删除此标记，然后将其删除，然后将按钮放置（追加）回到它来自的位置。一切正常，除了页面加载，按钮都适当地间隔开，但如果用户单击按钮然后决定从他们的选择中删除标签，当按钮被附加回其原始div时，它会触及其他按钮：

如果用户决定他们不再需要选项，并将其删除，则该按钮将附加回原始div，如下所示：

原始图像CSS上没有边距或填充，所以我无法弄清楚导致这种情况的原因。

按钮的HTML如下：

<div id="skills-selection">
        <h4>Skills:</h4> 
        <div id="skill-row">
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 1</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 2</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 3</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 4</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 5</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 6</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 6</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 7</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 8</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 9</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 10</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 11</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 12</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 13</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 14</button>
        </div>
    </div><!--skills selection-->

jquery如下：

$(document).on('click', '.skilltag', function() {
var txt = $(this).text();
$(".chosen-tags").append("<span class='tag label label-info choice-tag'>" + txt + "<span class='remove-skilltag' data-role='remove'>&nbsp&nbsp x &nbsp&nbsp</span></span>");
$(this).remove(); });



$(document).on('click', '.remove-skilltag', function() {
var txt = $(this).parent().clone().children().remove().end().text();
$(this).parent().remove();
$("#skill-row").append("<button type='button' class='btn btn-primary skilltag' data-toggle='button' aria-pressed='false' autocomplete='off'>" + txt + "</button>"); });

和按钮样式的CSS是：

.skilltag {
width: 80px;
line-height: .5;
height: 20px;
text-align: center;
display: inline-block; }

有谁知道为什么会这样？

Answer 1

空格是你的问题，项目与display水平对齐：inline-block考虑了元素之间的空格/换行符。

您的标记开始如下：

<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 9</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 10</button>

但是在添加你的标记之后就没有像这样的换行符：

<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 9</button><button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 10</button>

您可以在没有空格/换行符的情况下开始标记

或交换浮动以覆盖display：inline-block

.skilltag {
   float:left;
   margin:2px;
   ...

}

或者更改您的附加代码以包含空格

Answer 2

因为按钮元素在你附加它们时是内嵌块，所以没有空格，而在你的HTML中有空白区域。

如果在追加标记之后添加空格，则应该解决问题。但是，最好改变CSS以使按钮分开。

$(document).on('click', '.skilltag', function () {
    var txt = $(this).text();
    $(".chosen-tags").append("<span class='tag label label-info choice-tag'>" + txt + "<span class='remove-skilltag' data-role='remove'>&nbsp&nbsp x &nbsp&nbsp</span></span>");
    $(this).remove();
});



$(document).on('click', '.remove-skilltag', function () {
    var txt = $(this).parent().clone().children().remove().end().text();
    $(this).parent().remove();
    $("#skill-row").append("<button type='button' class='btn btn-primary skilltag' data-toggle='button' aria-pressed='false' autocomplete='off'>" + txt + "</button> ");
});

Jsfiddle与它合作：http://jsfiddle.net/juy2wknd/1/

Answer 3

html标签中的每个按钮后都有中断，这就是为什么你在按钮之间看到一些空格的原因。但是当按钮被附加到它的位置时，它和它之前的最后一个按钮之间没有任何制动，因此它不会留下空间。另一件事是你没有在你的CSS中给他们一些余地。