はじめに、ここにfiddleがあります。
<ul>
それぞれ<li>
に a が<p>
あり、rhs に浮かぶアイコンが必要です。段落には 1 ~ 4 行かかる場合があり、アイコンを行の真ん中にうまく配置したいと考えています。二重ラッピング<p>
が必要です、私を信じてください:)
の幅は<p>
、アイコンに必要なスペースを 100% 小さくする必要があります。基本的に、アイコンの右マージンによって残されたスペースの途中にアイコンを配置したい<p>
.
ここでのソリューションでは を使用しbackground-image
ていますが、画像はモバイル デバイスのドラッグ可能なハンドルとして機能する必要があるため、私には適していません。(私はこのアプローチを使用して、jQuery の並べ替え可能なデスクトップ サイトをタッチ スクリーン用に変更しています。)
jsfiddle の要求により、フィドルはプレースホルダーを<img>
使用しますが、実際には<a>
スプライトから画像を使用します。
マージンが前の行に移動し、ドラッグを台無しにする可能性があるため (つまり、誤って間違った行をドラッグする可能性があるため)、負のトップ マージンを設定することは避けたいと考えています。
ありがとう。