如何平均分配JavaScript列表

Question

我正在创建一个待办事项列表，并意识到文本会相互重叠。我想知道无论文本有多少，如何垂直均匀地隔开文本。

编辑：我忘记添加代码的JavaScript部分，因此添加了它。

我尝试过的

CSS代码：

ul[id="tasksUL"] li {
  height: 38px;
  display:inline-block
}

HTML：

<input type="text" name="newtask" value="" spellcheck="false" placeholder="New Task" id="newtask">
<ul id="tasksUL">
  <li><input type="checkbox" id="newtaskitem" class="right-margin"><label>test</label> <button type="button" class="deletetask"></button></li>
</ul>

原始CSS代码：

ul[id="tasksUL"] {
  margin: 0;
  padding: 0;
  position: relative;
  top: 142px;
  left: 50px;
  list-style-type: none;
  font-size: 20px;
  color: black;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  word-wrap: break-word;
  width: 355px;
  justify-content: space-around;
  display: inline-block;
}

ul[id="tasksUL"] li {
  height: 38px;
}

.selected { 
  text-decoration: line-through; 
  font-size: 20px;
}
.right-margin{
  margin-right: 20px;
}

.deletetask {
  background: url('delete.png') no-repeat;
  background-size: 100%;
  width: 20px;
  height: 20px;
  border: none;
  right: 25px;
  outline: none;
  cursor: pointer;
  position: absolute;
}

JavaScript：

$(() => {
  $('input').on('keypress', function(e) {
    if (e.keyCode == 13) {
      const newTask = $(this).val();
      if (newTask) {
        var li = $("<li><input type='checkbox' id='newtasklist' class='right-margin' <label>" + newTask + "</label> <button type='button' class='deletetask'></button></li>");
        $('#tasksUL').append(li);
        $(this).val("");
      }
    }
  });
  $('body').on('click', ':checkbox', function(e) {
    $(this).parent().toggleClass('selected');
  });
  $(document).on("click", ".deletetask", function() {
    $(this).parent().remove();
  });
});