列表中的元素在调整大小时不会保持在一起

Question

我早些发布了它，但删除了它，因为我能够弄清楚它。我在使用此待办事项列表项目调整屏幕大小时遇到​​问题。我使用了一些JavaScript，可以在每个条目中创建一个列表项。该人员键入待办任务，然后添加一个复选框和“删除”图标。我的问题是，在较小的屏幕上，当给出长名称的任务时，复选框和删除图标会跳到上一层。我正在使用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

首先，根据HTML Specification的列表（ul）元素，将span列表作为项包含ul作为子节点是不正确的：

  

ul元素表示项目列表，其中项目的顺序并不重要-也就是说，更改顺序不会实质性地改变文档的含义。

     

列表中的项目是ul元素的li元素子节点。

之所以出现此问题，是因为根据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; */
  
}