1

我有一个包含标签的 div（比如 stackoverflow 上的标签功能）。我使用 ajax 将新标签附加到这个外部 div。一切正常，除了在新添加的标签中添加了大约 5px 的额外左边距或填充。当我检查 html 时，没有列出边距或填充，但它肯定存在。同样的事情也发生在 Chrome、Firefox、Safari 和 Opera 中。这是我的代码：

HTML：

<div class="tags_wrap">
    <div class="tag">
        <div class="tag_wrap">Tag 3</div>
    </div>
    <div class="tag">
        <div class="tag_wrap">Tag 2</div>
    </div>
    ...
</div>

CSS：

.tags_wrap {
    margin:1px 7px 5px 0px;
    float:left;
    text-align:left !important;
}

.tag {
    padding:0;
    margin:4px 7px 0 0;
    border: 1px solid #094C7C;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    background-color:#fff;
    color:#000;
    position:relative;
    display:inline-block;
    font-size:12px;
}

.tag_wrap {
    position:relative;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    border-top: 1px solid #1C7ABF;
    border-right: 1px solid #1C7ABF;
    border-bottom: 1px solid #1C7ABF;
    border-left: 1px solid #1C7ABF;
}

jQuery：

$(document).ready(function(){
    $('form#addSomeTags').unbind('submit').bind('submit',function() {
        var newTag = $("form#addSomeTags > input[name=tagField]").val();
        $.ajax({
            type: "POST",
            url: 'add_tag.php',
            dataType: 'html',
            data: {tag:newTag},
            success: function(data){
                $('.tags_wrap').append(data);
                }
            }
        });
        return false;
});
});

成功完成我的 php 脚本后返回的内容将类似于其他标签data：.ajax()

<div class="tag">
    <div class="tag_wrap">Tag 2</div>
</div>

在新的“ajaxed”标签上总是有这种不需要的左边距或填充。如果我刷新页面，那么这个边距就不再存在了。关于为什么会发生这种情况的任何想法？

4

2 回答 2

1

最有可能的是，这只是空白，您得到的 HTML 答案以额外的空白字符开头。当您删除所有这些时，它应该可以工作（演示）：

工作演示的屏幕截图

于 2013-05-06T02:13:36.880 回答
0

这是一个明显众所周知的问题，当使用显示时会发生：inline-block: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

我个人使用 flexbox 解决了这个问题：

在父母上：

display: flex

如有必要，对孩子们：

flex-shrink: 0
于 2016-02-22T14:09:02.147 回答