1

我正在创建一个右侧带有删除图像（按钮）的列表。当我将aandspan元素放入li元素中，并为元素赋予float:right样式时span，它在 Chrome 中有效，但在 IE 中无效。IE 渲染删除图像不在同一行。在 Chrome 上，删除第二个li不呈现li.

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

PS：小提琴链接在这里

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

1 回答 1

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

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

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

于 2012-05-07T18:27:40.337 回答