gpt4 book ai didi

javascript - 为什么我的右浮动元素越来越多地出现在左侧

转载 作者:行者123 更新时间:2023-11-28 14:26:58 25 4
gpt4 key购买 nike

我正在学习待办事项列表教程。在我尝试稍微调整一下样式之前,它一直在正常工作。我在带有“删除”类的按钮内有一个 Font Awesome 垃圾桶图标。基本上我把按钮的所有样式都去掉了,所以它只是垃圾桶图标。用户单击它,待办事项列表项就会删除,这是应该的。我想从弹出的任务中右对齐垃圾桶。它会这样做,但每次我添加新任务时,垃圾桶的漂浮度会越来越低。

我会尝试只发布相关代码,但我不确定为什么会这样。我正在使用 bootstrap 来帮助设置样式,而且加号圆形按钮似乎不会干扰任务的创建。任何想法都会很棒,谢谢大家!

Here is a pic

function get_todos() {
var todos = new Array;
var todos_str = localStorage.getItem('todo');
if (todos_str !== null) {
todos = JSON.parse(todos_str);
}
return todos;
}

function add() {
var task = document.getElementById('task').value;

var todos = get_todos();
todos.push(task);
localStorage.setItem('todo', JSON.stringify(todos));

show();

return false;
}





//This is mostly where the remove button takes place


function remove() {
var id = this.getAttribute('id');
var todos = get_todos();
todos.splice(id, 1);
localStorage.setItem('todo', JSON.stringify(todos));

show();

return false;
}

function show() {
var todos = get_todos();

var html = '<ul>';
for(var i=0; i < todos.length; i++) {
html += '<li>' + todos[i] + '<button class="remove" id="' + i + '"><i class="fa fa-trash" aria-hidden="true"></i></button></li>';
};
html += '</ul>';

document.getElementById('todos').innerHTML = html;

var buttons = document.getElementsByClassName('remove');
for (var i=0; i < buttons.length; i++) {
buttons[i].addEventListener('click', remove);
};
}

document.getElementById('add').addEventListener('click', add);
show();
 .remove { /*Trash can button*/
color:#C0C0C0;
font-size:24px;
border:0;
padding:0;
background-color:transparent;
float:right;

}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="container" style="margin-top:200px;">
<div class="row justify-content-center">
<div class="col-sm-12 col-lg-8">
<h1 style="padding-bottom:20px;">Test</h1>
<div class="form-group">
<input type="text" class="form-control" id="task">
</div>
</div>
</div>
<div class="row justify-content-center" style="margin-top:20px;">
<div class="col-sm-12 col-sm-8">
<div id="todos"></div>
</div>
</div>
<div class="row">
<div class="col"></div>
<div class="col-xs-2" style="margin-right:15px; margin-top:30px;">
<button id="add" style="border-radius:50%; font-size:35px; width:65px;" class="btn btn-danger">+</button>
</div>
</div>
</div>

here is the fiddle

最佳答案

是因为它上面的 float 元素挡住了。避免这种情况的一种方法是将 clear: rightclear: both 添加到 float 元素的样式中。

.remove { /*Trash can button*/
color:#C0C0C0;
font-size:24px;
border:0;
padding:0;
background-color:transparent;
float:right;
clear:right;
}

关于javascript - 为什么我的右浮动元素越来越多地出现在左侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54582936/

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