Почему мои элементы с плавающей точкой все больше и больше уходят влево - PullRequest
Новая
       13

Почему мои элементы с плавающей точкой все больше и больше уходят влево

0 голосов
/ 08 февраля 2019

Я прорабатываю учебник по списку задач.Это работало должным образом, пока я не попытался немного украсить его.У меня есть значок 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>

вот скрипка

Ответы [ 2 ]

0 голосов
/ 08 февраля 2019

Я играл с CSS и нашел следующие стили CSS.Исправление см. Ниже изменений.Список будет выглядеть лучше.

на <ul> элемент

add 

font-size: 20px;

на .remove класс

удалить 

font-size: 24px;
float:right;

добавить 

position: absolute;
right: 20px;
0 голосов
/ 08 февраля 2019

Это потому что плавающий элемент над ним находится в пути.Один из способов избежать этого - добавить clear: right или clear: both к стилям плавающего элемента. 

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