Create a contenteditable li tag with a delete button next to it

Question

I'm trying to build a ul , where each li is contenteditable and there is a delete button to the left of that li .
I tried doing this:

<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>

But the button becomes the contenteditable item and it's inside the li and not to the left.

Answer 1

Instead of directly editing the <li> , you could have a contenteditable child <div> and a button.

<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>

So that you can position it easily relative to <li> , without it being edited, something like this Demo

Answer 2

I hope i understood your problem well.

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;
}