Newline on pull-right (Bootstrap)

Question

Я пытаюсь сделать список дел, используя Bootstrap и Javascript, и каждый элемент в списке состоит из текста, который вводится пользователем и трех щелчком мыши глификонов (редактирование, завершение , remove), на котором я использую .pull-right, чтобы они отображались справа от элемента списка.

Это хорошо работает при добавлении нового элемента в целом, но я также хочу, чтобы элементы редактировались, и при сохранении редактирования глификоны внезапно появляются на одной строке под текстом (и вне поля, которое является пункт списка, если на то пошло).

http://jsfiddle.net/k3uLutbb/

Короче говоря, мой вопрос: Как я могу получить текст и glyphicons оставаться выровнены по горизонтали при сохранении редактирования?

$("#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