ホームページ > 記事 > ウェブフロントエンド > css_html/css_WEB-ITnose を使用してこの効果を実現する方法
css_html/css_WEB-ITnose を使用してこの効果を実現する方法
- WBOYオリジナル
- 2016-06-21 09:31:021133ブラウズ
<li style='width:150px'> <img style="width:150px;" src=" " /> <span class="del">删除</span> <span class="addordernum">排序</span> <span class="minusordernum">排序</span> </li>
position:relative; を使用せずに li タグの右上隅/左下隅/右下隅にスパンをアタッチできることを願っています。この属性には半日のオフセットが必要です。スケーラビリティも悪い、、、、、、
ディスカッションへの返信(解決策)
liは相対位置を設定し、絶対位置を四隅にまたがる、計算するものは何もない
<!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> 上の階の正解者は本当に熱心です
実際、多くのタグは div に置き換えることができます。 。
私は li タグを使用しましたが、正直言って柔軟性が非常に低く、互換性が低いです。 。
tableタグと同様に、表示効果はブラウザごとに異なります。 。 。
div を使用できる場合は、代わりに div を使用してみてください。 。 img 画像とハイパーリンクは div に置き換えることができます。 。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。