gpt4 book ai didi

javascript - 右拉换行(Bootstrap)

转载 作者:行者123 更新时间:2023-12-01 05:36:33 24 4
gpt4 key购买 nike

我正在尝试使用 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,但无济于事。

最佳答案

当然,我也应该搜索“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

关于javascript - 右拉换行(Bootstrap),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33671039/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com