[英]Create a contenteditable li tag with a delete button next to it
I'm trying to build a ul
, where each li
is contenteditable
and there is a delete button to the left of that li
. 我试图建立一个
ul
,其中每个li
是contenteditable
,有一个删除按钮到左边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. 但是
button
变成了contenteditable
项目,它在li
内部而不是在左侧。
Instead of directly editing the <li>
, you could have a contenteditable
child <div>
and a button. 除了直接编辑
<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>
So that you can position it easily relative to <li>
, without it being edited, something like this Demo 这样您就可以相对于
<li>
轻松定位它,而无需对其进行编辑,例如此Demo
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.