div 内的 css 对齐列表

Question

我在使用 CSS 对齐图像时遇到了很多问题。事情是这样的，我在这个 div 中有一个名为“toggle”的 div 我有一个列表 ul - li 在每个 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 值起到了作用。