如何在li元素右侧顶部设置删除按钮？

Question

我正在尝试使用删除按钮制作li元素，但我找不到解决方案

我想要的是：

此处红色矩形是删除按钮

html正在尝试的是：

 <li id="liRightDescriptions">
    <span>
    Descriptions
    <img src="../Images/RemoveButton.ico">
    </span>
    </li>

更多：我需要在MouseOver上显示删除按钮，当我点击那里时，jquery查询事件应该被触发，而文本也是

所以我想，我不想将删除图像设置为背景

这是我的HTML ：http://jsfiddle.net/2h78A/

Answer 1

对于按钮位置使用：

.removeImg {
    float: right;
}

或

.liRightDescriptions span {
    position: relative;
}

.removeImg {
    position: absolute;
    top: 0;
    right: 0;
}

在悬停时显示/隐藏：

$('.liRightDescriptions').hover(function() {
    $('.removeImg').fadeIn(500);
}, function() {
    $('.removeImg').fadeOut(500);
});

隐藏点击时的li：

$('.removeImg').click(function() {
    $(this).parent('.liRightDescriptions').hide(500);
    /* you could also remove the element altogether here if needed */
});

请注意，您应该使用类而不是id，因为元素不是唯一的。

Answer 2

HTML（可以用任何文本或图像替换x）

<ul>
<li><span>x</span>Text 1</li>
<li><span>x</span>Text 1</li>
<li><span>x</span>Text 1</li>
<li><span>x</span>Text 1</li>
<li><span>x</span>Text 1</li>
<li><span>x</span>Text 1</li>
</ul>

CSS

ul{
    width:160px;
}
li{
    position:relative;
    padding:5px 10px;
    background:#ccc;
    border-radius:3px;
    margin:3px;
}
li:hover span{display:block;}
li span{
    display:none;
    padding:3px;
    line-height:8px;
    cursor:pointer;
    position:absolute;
    right:0px;
    top:0px;
}

Answer 3

black-square {
position: relative
}

delete-img { 
position:absolute;
top:2px;
right: 2px;
}