為什么我的浮動右側元素越來越多地出現在左側

Question

我正在學習一個待辦事項列表教程。 它運行正常，直到我嘗試對其進行一些設計。 我在一個帶有“刪除”類的按鈕內有一個 Font Awesome 垃圾桶圖標。 基本上我去掉了按鈕上的所有樣式，所以它只是垃圾圖標。 用戶點擊它，待辦事項列表項就會刪除，這是應該的。 我想從彈出的任務中正確對齊垃圾桶。 它確實這樣做了，但是每次我添加一個新任務時，垃圾桶漂浮的越來越少。

我會嘗試僅發布相關代碼，但我不確定為什么會發生這種情況。 我正在使用引導程序來幫助設置樣式，並且加號圓形按鈕似乎不會在創建任務時干擾它們。 任何想法都會很棒，謝謝大家！

這是一張照片

 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>

這是小提琴

Answer 1

這是因為它上面的浮動元素擋路了。 避免這種情況的一種方法是在浮動元素的樣式中添加clear: right或clear: both 。

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

Answer 2

我玩弄了 CSS 並發現以下 CSS 樣式有效。 更正，見下面的變化。 這將使列表看起來更好。

在<ul>元素上

添加

font-size: 20px;

在.remove類上

消除

font-size: 24px;
float:right;

添加

position: absolute;
right: 20px;