javascript - 右拉换行(Bootstrap)

Question

我正在尝试使用 Bootstrap 和 Javascript 制作一个待办事项列表，列表中的每个项目都包含一个用户输入的文本和三个可点击的字形图标(编辑、完成、删除)，我在其中使用.pull-right 使它们出现在列表项的右侧。

这在完全添加新元素时效果很好，但我也想让元素可编辑，并且在保存编辑后，字形突然出现在文本下方一行(并且在列表框的外部) - 就此而言的项目)。

http://jsfiddle.net/k3uLutbb/

简而言之，我的问题是:保存编辑时如何使文本和字形保持水平对齐？

$("#addText").on("click", function() {
var inText = $("#inText").val();
if(inText !== "") {
  $("#inText").val("");
  var theText = "<li class='list-group-item'>"+inText+"<span class='glyphicon glyphicon-remove pull-right' aria-hidden='true'></span><div class='glyphicon glyphicon-ok pull-right' id='1' aria-hidden='true'></div><span class='glyphicon glyphicon-pencil pull-right' aria-hidden='true'></span></li>";
  $(".list-group").append($(theText));
}

^ 这是为了添加新的列表项，对齐效果很好。

$("ul").on("click", "#updateText", function() {
var inText = $("#newText").val());
console.log("hihi");
if(inText !== "") {
  var theText = inText+"<span class='glyphicon glyphicon-remove pull-right' aria-hidden='true'></span><span class='glyphicon glyphicon-ok pull-right' aria-hidden='true'></span><span class='glyphicon glyphicon-pencil pull-right' aria-hidden='true'></span>";
  $(this).closest("li").html(theText);
}

^ 这是为了保存编辑，即使我从其他函数复制了 html，对齐也会变得困惑。

我也尝试过使用 float: right;而不是.pull-right，但无济于事。

Answer 1

当然，我也应该搜索“float: right/float: left”，因为我在那里找到了答案。我只是交换了代码，如下所示:

var theText = "<span class='glyphicon glyphicon-remove pull-right' aria-   hidden='true'></span><span class='glyphicon glyphicon-ok pull-right' aria-hidden='true'></span><span class='glyphicon glyphicon-pencil pull-right' aria-hidden='true'></span>"+inText;
  $(this).closest("li").html(theText);

即“inText”变量位于跨度之后而不是之前。

float: right in IE7 dropping to a new line