4

私は現在、アイテムのリストを持っています。1行のテキストである項目と、間に区切りがある2行の項目があります。

画像をテキストの右側に垂直に配置するのに問題があります。テキストが1行しかない場合は簡単に配置できますが、複数行の場合は画像が上部に表示されます。

<ul>
    <li><a href="#"><img src=""/>Text Text Text<br/>Second Line of Text</a></li>
    <li><a href="#"><img src="" />Text Text Text</a></li>
    <li><a href="#"><img src="" />Text Text Text</a></li>
</ul>

以下は何が起こっているかの例です。

http://jsfiddle.net/SAwFE/

4

1 に答える 1

3

絶対測位を使用します。これに変更します。これには、次の改良されたコードがあります。

ul li {
    position: relative; /* added to your existing code */
}

img {
    height: 20px;
    width: 20px;
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -10px; /* half height of image */
}

（コメントごとに）重複する可能性を回避するには、の右側のパディングを同様liの幅だけ増やします。img 

ul li { 
    padding: 9px 32px 9px 12px; /* modified existing code */
    position: relative; /* added to your existing code */
}
于 2012-12-18T18:34:18.483 に答える