ToDO清单应用程式和清单项目长度的问题

Question

我正在研究一个Q / A简单的待办事项待办事项应用程序，请注意，当将一个很长的列表项添加到列表中时，它会将按钮推出。

有没有一种方法可以在textnode击中按钮边距时使LI元素变大，而不是将按钮从LI元素中推出。以下是屏幕截图。我将在下面发布我的源代码，但是也许这是一个快速解决的问题？

我的源代码可以在这里找到-Issue with floating buttons right of my to do list

Answer 1

A）如果我对您的理解很好，则可以使用CSS-Grid轻松修复它：

li {
  display: grid;
  grid-template-columns: 3fr 100px;
  grid-template-areas: 'text button';
}

li > span {
  grid-area: text;
}

li > button {
  grid-area: button;
  height: 30px;
}

https://jsfiddle.net/axqwhj29/

使用上面链接的示例调整结果区域的大小，以检查是否正是您要找的内容。

B）另外，但我不建议您，如果您确实不想更改li的高度，并且具有最大的文本宽度（例如：25个字符），则可以剪切部分内容垂直显示在手机上的消息，如果用户翻转到水平，则自动显示整个文本。

https://jsfiddle.net/qfy3mz01/

希望获得帮助：）

Answer 2

好吧，我已经用li元素将文本包裹在span内，并添加了网格显示到li并给li内的每个元素都添加了{{ 1}}，然后我添加了width，所以当word-break: break-word;的文本达到宽度限制并且不影响删除span并且我删除了{ button中的{1}}，因此height会随着其上的线条而增长

li

li

var addItemButton = document.getElementById('addItem')
var onEnter = document.getElementById('newNote')


//below event listener adds an item to the list on click
addItemButton.addEventListener('click', function() {
  let item = document.getElementById('newNote').value
  let node = document.createElement("li")
  let span = document.createElement("span")
  let textnode = document.createTextNode(item)

  span.appendChild(textnode)
  node.appendChild(span)
  if (item) {
    document.getElementById('list-body').appendChild(node)
  }


  let node2 = document.createElement('BUTTON')
  let textnode2 = document.createTextNode('Delete')
  node2.appendChild(textnode2)
  node.appendChild(node2)

  node2.addEventListener('click', function() {
    node2.parentNode.parentNode.removeChild(node)
  });

  document.getElementById('newNote').value = ''
});


onEnter.addEventListener('keyup', function(event) {
  if (event.keyCode === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    // Trigger the button element with a click
    addItemButton.click();
  }
})


function applyButton() { //onload for dummy data or data from db
  let getListObjects = document.querySelectorAll("li")

  for (let i = 0; i < getListObjects.length; i++) {

    let node2 = document.createElement('BUTTON')
    let textnode2 = document.createTextNode('Delete')
    node2.appendChild(textnode2)

    getListObjects[i].appendChild(node2)

    let y = getListObjects[i].querySelector('button')
    y.addEventListener('click', function() {
      y.parentNode.parentNode.removeChild(getListObjects[i])
    });

  }
}

P.S。我已经编辑了您的js代码，因此它将生成.container { height: 100%; width: 40%; margin: 0 auto; } .container2 { display: grid; grid-template-columns: repeat(2, 1fr); background-color: grey; border: 1px solid grey; } #main-grid { width: 100%; } #newNote { height: 25px; } #inputIdForGrid { justify-content: left; align-items: center; display: flex; padding-left: 0.3em; padding-top: 0.5em; padding-bottom: 0.5em; } button { padding: 10px 18px; background-color: green; border: none; color: white; font-size: 14px; align-self: center; justify-self: end; } #addItem { margin-left: 1em; padding: 0.5em; color: white; font-size: 1.5em; float: right; } ul { list-style-type: none; padding: 0px; margin: 0px; } li { padding: 5px 15px; display: grid; grid-template-columns: 2.5fr .5fr; } span { word-break: break-word; grid-column: 1 / 2; display: flex; align-items: center; } li:nth-child(2n) { background-color: grey; } li>button { background-color: red; } h1 { text-align: center }并在其中添加文本