javascript - 创建一个 contenteditable li 标签，旁边有一个删除按钮

Question

我正在尝试构建一个 ul ，其中每个 li是contenteditable在li 的左边有一个删除按钮。 .
我试过这样做:

<ul id='list'>
    <li type='disc' id='li1' class='div' onkeydown='return func(event)' style='margin-left:0px;width:50%' contenteditable><button>delete</button></li>
</ul>

但是 button变成 contenteditable元素，它在 li 内而不是在左边。

Answer 1

而不是直接编辑 <li> , 你可以有一个 contenteditable child <div>和一个按钮。

<ul id='list'>
  <li type='disc' id='li1' class='div' onkeydown='return func(event)' style='margin-left:0px;width:50%' >
    <div contenteditable></div>
    <button>delete</button>
   </li>
</ul>

这样您就可以相对于 <li> 轻松定位它, 没有被编辑，像这样的东西 Demo