css - div内のCSSアライメントリスト

Question

CSS で画像を配置する際に多くの問題が発生しています。これが問題です。この div 内に「トグル」という div があります。各 li にリスト ul - li があります。テキストと 3 つの画像がありますが、画像の配置がどのようになっているのか、画像を配置したいと考えています。左パディングではなく、テキストに対して。

http://aluna.webdcg.com/visistat/

Answer 1

多分これはあなたが必要とするものです。http://jsfiddle.net/67VWe/で実際のコードを参照してください。

CSS:

* { font-family: Tahoma; }
ul { width: 200px; margin: 20px; border: 1px solid #777; }
li { padding: 2px; border-bottom: 1px dotted #777; }
li label { width: 120px; float: left; }
​

HTML:

<div id="toggle">
    <ul>
        <li><label>Text 1</label> <img src="http://admin.visistat.com/sales/img/icon-pulse-dot-red.png" width="22" height="22" /></li>
        <li><label>Text 1234</label> <img src="http://admin.visistat.com/sales/img/icon-pulse-dot-red.png" width="22" height="22" /></li>
        <li><label>Text 1234567</label> <img src="http://admin.visistat.com/sales/img/icon-pulse-dot-red.png" width="22" height="22" /></li>
    </ul>
</div>

--

labelタグ、width、およびfloatの値がうまくいきました。