css 这样效果怎么搞_html/css_WEB-ITnose-html教程-PHP中文网

回复讨论(解决方案)

首页

web前端

html教程

css 这样效果怎么搞_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:31 AM

        <li style='width:150px'>            <img  src="/static/imghw/default1.png"  data-src=" "  class="lazy"    style="max-width:90%"  / alt="css 这样效果怎么搞_html/css_WEB-ITnose" >            <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="/static/imghw/default1.png"  data-src="http://img.baidu.com/img/image/3bf33a87e950352a5947ae485143fbf2b2.jpg"  class="lazy"   / alt="css 这样效果怎么搞_html/css_WEB-ITnose" >            <span class="del">删除</span>            <span class="addordernum">排序</span>            <span class="minusordernum">排序</span>        </li></ul></body></html>

登录后复制

楼上正解真热心

告诉LZ，其实很多标签都可以用 div 代替。。
li 标签我用过，老实说很不灵活，而且兼容性也不好。。
就比如table标签，不同浏览器下显示效果都不一样。。。
能用div的就尽量用div替代。。img图像，a 超链接都可以用div替代呢。。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn