1

右側に削除画像（ボタン）のあるリストを作成しています。aandspan要素を要素に入れ、要素にスタイルをli与えると、Chrome では機能しますが、IE では機能しません。IE は削除イメージを同じ行ではなくレンダリングします。そしてChromeでは、.の右上をレンダリングしない2番目の画像を削除します。float:rightspanlili

右側に削除ボタンがあるアイテムリストだけで、ブラウザに依存しない必要があります。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 に答える