div内的css对齐列表

【问题标题】：css alignment list inside divdiv内的css对齐列表
【发布时间】：2012-06-18 21:13:20
【问题描述】：

我在 CSS 上对齐图像时遇到了很多问题。事情是这样的，我在这个 div 中有一个名为“toggle”的 div 我在每个 li 上有一个列表 ul-li 我有文本，然后是 3 个图像，但我想让图像对齐一些图像的对齐方式相对于文本而不是左侧填充。

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

【问题讨论】：

<img> 标签默认为display:inline; .. 请停止使用position: abs/rel; 创建布局
@tereško 我认为默认情况下它们是inline-block，因为您仍然可以调整宽度和高度，而内联元素尺寸例如span 不能被操纵。
@DexterHuinda，实际上你是对的 ..你可以操纵图像标签的高度..哦好吧..编辑太晚了

标签： css layout text

【解决方案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 值起到了作用。

【讨论】：

Np，当你达到代表 15 时投票赞成我的答案 :) 祝你的项目好运。