个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 18:46:27 25 4
gpt4 key购买 nike

我正在创建一个右侧带有删除图像(按钮)的列表。当我将 a 和 span 元素放入 li 元素中，并将 float:right 样式赋予 span 元素，它在 Chrome 中有效，但在 IE 中无效。 IE 呈现删除图像不在同一行。在 Chrome 上，删除第二个 li 上的图像，而不是呈现 li 的右上角。

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

PS: fiddle 链接 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>

最佳答案

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

根据需要调整定位。如果重叠，此方法可能会影响其他内容的可见性，但优点是删除按钮放在标记中的什么位置并不重要。

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

关于html - 带有 css 右侧删除图像的 li 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10487041/

25 4 0
文章推荐： html - CSS Positions 和 floats 一切都在叠加
文章推荐： html - 图像中心对齐 - 有效但不完美
文章推荐： javascript - 我的 for 循环出现意外的 token 错误
文章推荐： javascript - 在这个 JavaScript 函数中显示淡入效果？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com