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和一个按钮，而不是直接编辑<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

Answer 2

我希望我能很好地理解你的问题。

Please check the fiddle

<ul id='list'>
    <li type='disc' id='li1' class='div' onkeydown='return func(event)'  contenteditable>This is the sample text</li>
     <li type='disc' id='li1' class='div' onkeydown='return func(event)'  contenteditable>This is the sample text</li>
     <li type='disc' id='li1' class='div' onkeydown='return func(event)'  contenteditable>This is the sample text</li>
</ul>

#list {
    position:relative;
}
#list li {
    margin-left : 30px;
    line-height: 25px;
    margin-bottom:5px;
}
#list li:before {
    width:50px;
    line-height:25px;
    background:#ddd;
    content:'Delete';
    position:absolute;
    left:0px;
    text-align:center;
    border:1px solid #777;
}

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

2 个答案: