css 这样效果如何搞-HTML教程-爱易网页

css 这样效果如何搞

日期：2014-05-16　浏览次数：20649 次

css 这样效果怎么搞

本帖最后由 qiaoshengruge 于 2014-03-13 12:06:11 编辑



        <li style='width:150px'>

            <img style="width:150px;" src=" " />

            <span class="del">删除</span>

            <span class="addordernum">排序</span>

            <span class="minusordernum">排序</span>

        </li>

希望实现 span 能贴到 li 标签的右上角/左下角/右下角
不用 position:relative; 有其他的办法吗，，这个属性要算半天偏移量，扩展性也差，，，，，，

------解决方案--------------------
li设置相对定位，然后span绝对定位到四个角，没什么可计算的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

ul{margin:100px auto;padding:0;width:500px;}

img{width:500px;height:400px;}

li{ position:relative; list-style:none;}

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

.addordernum{position:absolute;left:0;bottom:0;}

.minusordernum{position:absolute;right:0;bottom:0;}

</style>

</head>



<body>

<ul>

<li>

            <img src="http://img.baidu.com/img/image/3bf33a87e950352a5947ae485143fbf2b2.jpg" />

            <span class="del">删除</span>

            <span class="addordernum">排序</span>

            <span class="minusordernum">排序</span>

        </li>

</ul>

</body>

</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

css 这样效果如何搞

相关资料更多>

推荐阅读更多>