Question

我正在创建一个右侧有删除图像（按钮）的列表。当我将a和span元素放入li元素，并将float:right样式提供给span元素时，它可以在Chrome中使用，但不适用于IE。 IE渲染删除图像不是同一行。在Chrome上，删除第二个li上没有呈现li右上角的图片。

我需要浏览器独立，只需要右侧有删除按钮的项目列表。没有ul，li，span元素的任何其他解决方案都会受到赞赏。（按钮或图像必须是单独的元素，因为我将添加点击处理程序。）

PS：小提琴链接here

<html>
<head>
<style type="text/css">
ul{
width: 200px;
}

li{
   border-style:solid;
   border-color:#98bf21; 
}

li span{
background-image:url('http://www.kodlab.com/Image/delete.png');
    width: 16px;
    heigth: 16px;
    display: inline-block;
}


</style>
</head>
<ul>
    <li><a>Foo</a><span></span></li>
    <li><a>neque porro quisquam est qui dolorem ipsum</a><span></span></li>
</ul>
</body>
</html>

Answer 1

让float:right做你想做的最简单的方法是在标记中的链接之前移动删除按钮：

http://jsfiddle.net/RMEeF/5/

<ul>
    <li><span></span><a>Foo</a></li>
    <li><span></span><a>neque porro quisquam est qui dolorem ipsum</a></li>
</ul>

另一种选择是在删除按钮上使用position:absolute，在容器上使用position:relative;：

http://jsfiddle.net/RMEeF/6/

li{  
   position:relative;
}

li span{
    background-image:url('delete.png');
    width: 16px;
    height: 16px;
    position:absolute;
    top:2px;
    right:2px;
}

根据需要调整定位。如果其他内容重叠，这种方法可能会干扰其他内容的可见性，但优点是标记在删除按钮的位置无关紧要。

你可能应该使用表单删除按钮而不是跨度。

带有删除图像的li元素右侧带有css

1 个答案: