0

はじめに、ここにfiddleがあります。

<ul>それぞれ<li>に a が<p>あり、rhs に浮かぶアイコンが必要です。段落には 1 ～ 4 行かかる場合があり、アイコンを行の真ん中にうまく配置したいと考えています。二重ラッピング<p>が必要です、私を信じてください:)

の幅は<p>、アイコンに必要なスペースを 100% 小さくする必要があります。基本的に、アイコンの右マージンによって残されたスペースの途中にアイコンを配置したい<p>.

ここでのソリューションでは を使用しbackground-imageていますが、画像はモバイル デバイスのドラッグ可能なハンドルとして機能する必要があるため、私には適していません。(私はこのアプローチを使用して、jQuery の並べ替え可能なデスクトップ サイトをタッチ スクリーン用に変更しています。)

jsfiddle の要求により、フィドルはプレースホルダーを<img>使用しますが、実際には<a>スプライトから画像を使用します。

マージンが前の行に移動し、ドラッグを台無しにする可能性があるため (つまり、誤って間違った行をドラッグする可能性があるため)、負のトップ マージンを設定することは避けたいと考えています。

ありがとう。

4

2 に答える 2

2

bfrohsによるこの回答に基づいて、

デモはこちら

HTML

  <ul>
    <li class="absoluteCenterWrapper">
        <p class="text">This is some text that flows over multiple lines and I want it to have the icon on the rhs that stays in the middle of the line no matter how many lines of text (and I'd really like not to use a negative top margin on the image).</p>
        <img class="icon" src="http://placekitten.com/g/20/20">
    </li>
</ul>

CSS

.text {
    margin-right:35px;
}

.absoluteCenterWrapper {
    position:relative;
}

.icon {
     margin:auto;
     position:absolute; 
     max-height:100%;
     max-width:100%;
     top:0;
     bottom:0;
     right:0;
}
于 2012-12-24T08:02:38.380 に答える
1

li 要素の位置を絶対位置に変更し、img の位置も絶対位置に変更します。CSS を使用する代わりに、このコードを追加することを検討してください。

.icon{
margin:40% 5%;
float:right;position:absolute;
}

このフィドルを参照してください。

http://jsfiddle.net/NXWPE/47/

于 2012-12-24T08:00:48.667 に答える