Question

我有一个带有两个span元素的div：

<div id="layout-workspace-name">
     <span id="workspace-name">My workspace</span>
     <span class="glyphicon glyphicon-pencil" style="color: white"></span>
</div>

否则我有一个Jquery代码，当我点击＆＃39;＃workspace-name＆＃39;它取代了＆＃39;＃layout-workspace＆＃39;：

的内容

$(document).on('click', '#workspace-name', function () {
    $('#layout-workspace-name').empty();
    $('#layout-workspace-name').append(
        '<input id="edit-workspace-name" value="' + workspace_name + '" type="text">'+
        '<span id="submit-name" class="glyphicon glyphicon-ok"></span>'+
        '<span id="cancel-name" class="glyphicon glyphicon-remove"></span>');
});

问题在于，当我添加此代码时，元素会丢失它们之间的间距，如下所示： This is how it looks和 This is how the should look。这是我用于这些元素的CSS：

#layout-workspace-name {
  position: relative;
  float: left;
  top:50%;
  transform: translateY(-50%);
}

#workspace-name {
   font-size: 1.3em;
   color: #FFFFFF;
}

#submit-name {
  color: white;
  padding: 7px;
  background: #00D159;
  border-radius: 5px;
}

#cancel-name {
  color: white;
  padding: 7px;
  background: #d10003;
  border-radius: 5px;
}

谢谢大家，对不起我的英语。

Answer 1

在HTML中，空白实际上非常重要。它们之间具有空格的元素的样式与没有它的元素的样式不同。为了使元素正确显示，您需要在它们之间插入一些空格。因此，如果你用它替换你的jQuery代码它应该工作。我改变的只是在每一行之后添加一个空格。（额外的+运算符可以使它更清晰，但可以删除它们）

$('#layout-workspace-name').append(
    '<input id="edit-workspace-name" value="' + workspace_name + '" type="text">'+' '+
    '<span id="submit-name" class="glyphicon glyphicon-ok"></span>'+' '+
    '<span id="cancel-name" class="glyphicon glyphicon-remove"></span>'+' ');

注意：虽然空格非常重要，但空格的数量并不重要，因此任何标签组合都会返回，空格总是被视为相同。

动态创建的元素会丢失间距

1 个答案: