элементы в списке не остаются вместе при изменении размера

Question

Я опубликовал это немного раньше, но удалил его, потому что смог немного разобраться.У меня возникла проблема при изменении размера экрана с этим списком задач, над которым я работаю.Я использую немного JavaScript, который создает элемент списка каждой записи.Пользователь вводит задачу todo, а затем добавляется флажок и значок удаления.Моя проблема заключается в том, что на экранах меньшего размера флажок и значок удаления подпрыгивают вверх по слою, когда задается задача с длинным именем.Я использую Bootstrap 4, чтобы держать все это на моей стороне HTML.Мое изображение должно помочь уточнить, о чем я говорю.Я думаю, что JavaScript может быть проблемой.

Вот список, когда на среднем экране.Выглядит правильно, с флажком / значком корзины справа от элемента.

Вот проблема, когда экран становится меньше.Значок чекбокса / корзины поднимается вверх по линии, а текст разбивается.Как сделать так, чтобы текст оставался на первой строке?Я попытался установить элемент "li" в width = "90%;"с флажком / удалить значок, заняв оставшиеся 10. Это выглядит хуже.Я действительно не уверен.Я приложу соответствующий код.

function show() {
	var todos = get_todos();
	
	var html = '<ul>';
	for(var i=0; i < todos.length; i++) {
	    html += '<span><input class="checkBox" type="checkbox"><li style="float:left;">' + todos[i] + '</li>' + '<button class="remove" id="' + i  + '"><i class="fa fa-trash" aria-hidden="true"></i></button></span><br/>';
	};
	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);
	};
}

  	body, html { /*makes the background image stretch the whole screen*/
	height:100%;
}
	body {
	background-image:url('campingBackground.jpg');
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center;
	background-size:cover;
}
	.checkBox {
	margin-right:10px;
	height:18px;
	width:18px;
}
	.checkBox:hover {
	background-color:#C0C0C0;	
}
  	.remove { /*Trash can button*/
	color:white;
	font-size:24px;
	border:0;
	padding:0;
	background-color:transparent;
}
	.remove:hover {
	color:#C0C0C0;
}
	ul {
	text-align:right; /*This pushes the checkbox/trash can right while the <li> in the js file floats the todo text left*/
	list-style-type:none;
	padding-left:0px; /*Makes up for not having the bullet point spacing on smaller screens*/ 
	font-size:24px;
	color:white;
	font-weight:600;
}
	li {
	text-align:left;
}

	<div class="header">
		<div class="container" style="padding-top:50px;"> 
			<div class="row justify-content-center"> <!--Input Box-->
				<div class="col-sm-12 col-lg-8">
					<h1>To-Do List</h1>
					<div class="form-group">
						<input type="text" class="form-control" id="task">
					</div>
				</div>
			</div>
			<div class="row"> <!--Add Button-->
				<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>
	</div>
		<div class="container text"> <!--ToDos-->
			<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>

Answer 1

Во-первых, неправильный список ul с такими элементами, как span в качестве дочерних узлов, согласно HTML-спецификации для элемента списка (ul):

Элемент ul представляет собой список элементов, где порядок элементов не важен, то есть когда изменение порядка не приведет к существенному изменению смысла документа.

Элементы элементасписок - это дочерние узлы элемента li элемента ul.

Проблема возникает из-за того, что в соответствии с именем элемента todo нет места для размещения todo.

Я рекомендую это изменение вашего кода в качестве возможного решения:

var todos = [
  'Lorem ipsun dolor sit amet',
  'Answer a question related to JavaScript on StackOverflow',
  'Another todo',
  'A really long long todo to show this code working for todo with long long long names'
];

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

html += '</ul>';

document.write(html);

/* https://www.w3schools.com/howto/howto_css_clearfix.asp */
.todo-item::after {
  content: "";
  clear: both;
  display: table;  
}

.todo-item {
  text-align: right;
}

.todo-item .todo-label {
  display: block;
  float: left;
  max-width: 80%; /*  you can increase the size */
  text-align: left;
  /* you can use this props if you don't wan another line */
  /* white-space: nowrap; */
  /* text-overflow: ellipsis; */
  /* overflow: hidden; */
  
}