html - 順序付けられていないリストを押し下げる画像

Question

私はこれを達成しようとしています:

しかし、私はこれを得ています：

これが私のコードです：

<ul id="quicklinks-main">
<li>Quick Access to Your Pharmacy Needs:</li>
<img id="refillBttle" src="images/prescription-refill-bottle.png" alt="prescription pills" />
<li><a id="quicklinks-refill-icon" href="#">Prescription Refills</a></li>
<li><a id="quicklinks-drug-center-icon" href="#"><span>Drug Information Center</span></a></li>
</ul>

画像を追加すると、リストの残りが押し下げられてめちゃくちゃになります。どうすればこれを修正できますか?

Answer 1

img を新しい li でラップしてみてください

ここで例を見ることができます: http://www.cvs.com/